text: am4core.useTheme(am4themes_animated);
  
  var chart = am4core.create("chartdiv", am4charts.XYChart);
  
  
  var data = [];
  
  chart.data = [{
      "year": "2014",
      "income": 23.5,
      "expenses": 21.1
  }, {
      "year": "2015",
      "income": 26.2,
      "expenses": 30.5
  }, {
      "year": "2016",
      "income": 30.1,
      "expenses": 34.9
  }, {
      "year": "2017",
      "income": 20.5,
      "expenses": 23.1
  }, {
      "year": "2018",
      "income": 30.6,
      "expenses": 28.2
  }, {
      "year": "2019",
      "income": 34.1,
      "expenses": 31.9,
      "stroke": "3,3",
      "opacity": 0.5
  }];
  
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.ticks.template.disabled = true;
  categoryAxis.renderer.line.opacity = 0;
  categoryAxis.renderer.grid.template.disabled = true;
  categoryAxis.renderer.minGridDistance = 40;
  categoryAxis.dataFields.category = "year";
  
  
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;
  valueAxis.renderer.line.opacity = 0;
  valueAxis.renderer.ticks.template.disabled = true;
  valueAxis.min = 0;
  
  var columnSeries = chart.series.push(new am4charts.ColumnSeries());
  columnSeries.dataFields.categoryX = "year";
  columnSeries.dataFields.valueY = "expenses";
  columnSeries.tooltipText = "expenses: {valueY.value}";
  columnSeries.sequencedInterpolation = true;
  columnSeries.defaultState.transitionDuration = 1500;
  columnSeries.fill = chart.colors.getIndex(4);
  
  var columnTemplate = columnSeries.columns.template;
  columnTemplate.column.cornerRadiusTopLeft = 10;
  columnTemplate.column.cornerRadiusTopRight = 10;
  columnTemplate.strokeWidth = 1;
  columnTemplate.strokeOpacity = 1;
  columnTemplate.stroke = columnSeries.fill;
  
  var desaturateFilter = new am4core.DesaturateFilter();
  desaturateFilter.saturation = 0.5;
  
  columnTemplate.filters.push(desaturateFilter);
  
  // first way - get properties from data. but can only be done with columns, as they are separate objects.    
  columnTemplate.propertyFields.strokeDasharray = "stroke";
  columnTemplate.propertyFields.fillOpacity = "opacity";
  
  // add some cool saturation effect on hover
  var desaturateFilterHover = new am4core.DesaturateFilter();
  desaturateFilterHover.saturation = 1;
  
  var hoverState = columnTemplate.states.create("hover");
  hoverState.transitionDuration = 2000;
  hoverState.filters.push(desaturateFilterHover);
  
  var lineSeries = chart.series.push(new am4charts.LineSeries());
  lineSeries.dataFields.categoryX = "year";
  lineSeries.dataFields.valueY = "income";
  lineSeries.tooltipText = "income: {valueY.value}";
  lineSeries.sequencedInterpolation = true;
  lineSeries.defaultState.transitionDuration = 1500;
  lineSeries.stroke = chart.colors.getIndex(11);
  lineSeries.fill = lineSeries.stroke;
  lineSeries.strokeWidth = 2;
  
  // second way - add axis range.
  var lineSeriesRange = categoryAxis.createSeriesRange(lineSeries);
  lineSeriesRange.category = "2018";
  lineSeriesRange.endCategory = "2019";
  lineSeriesRange.contents.strokeDasharray = "3,3";
  lineSeriesRange.locations.category = 0.5;
  
  var bullet = lineSeries.bullets.push(new am4charts.CircleBullet());
  bullet.fill = lineSeries.stroke;
  bullet.circle.radius = 4;
  
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.behavior = "none";
  chart.cursor.lineX.opacity = 0;
  chart.cursor.lineY.opacity = 0;