title: AmCharts 4 - multiple datasets
body: <p>please, I'm trying to create with AmCharts 4 chart with multiple data sets. In previous version it is done this way: <a href="https://www.amcharts.com/demos/multiple-data-sets/" rel="nofollow noreferrer">https://www.amcharts.com/demos/multiple-data-sets/</a>
  but I can't find anything how to make it in 4th version.
  I use the code from their website.
  Everything is ok, next chart I want to add in section starting with comment <strong>add ATR -> I need to show it under the original chart.</strong></p>
  
  <p>Thank you very much for any help.
  Have a nice day!</p>
  
  <pre><code>var chart = am4core.create("candlestick-chart", am4charts.XYChart);
  chart.paddingRight = 20;
  
  // chart.dateFormatter.inputDateFormat = "YYYY-MM-dd";
  chart.dateFormatter.inputDateFormat = "x";
  
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.location = 0;
  
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;
  
  /*
      add default series
   */
  
  var series = chart.series.push(new am4charts.CandlestickSeries());
  series.dataFields.dateX = "date";
  series.dataFields.valueY = "close";
  series.dataFields.openValueY = "open";
  series.dataFields.lowValueY = "low";
  series.dataFields.highValueY = "high";
  series.dataFields.atr = "atr";
  series.dataFields.average_atr = "average_atr";
  series.simplifiedProcessing = true;
  series.tooltipText = "Open:${openValueY.value}\nLow:${lowValueY.value}\nHigh:${highValueY.value}\nClose:${valueY.value}\nATR:{atr.formatNumber('#.000')}\nAverage ATR:{average_atr.formatNumber('#.000')}";
  
  series.riseFromPreviousState.properties.fillOpacity = 1;
  series.dropFromPreviousState.properties.fillOpacity = 0;
  
  chart.cursor = new am4charts.XYCursor();
  
  
  /*
      add scrollbar
   */
  // a separate series for scrollbar
  var scrollbarSeries = chart.series.push(new am4charts.LineSeries());
  scrollbarSeries.dataFields.dateX = "date";
  scrollbarSeries.dataFields.valueY = "close";
  // need to set on default state, as initially series is "show"
  scrollbarSeries.defaultState.properties.visible = false;
  
  // hide from legend too (in case there is one)
  scrollbarSeries.hiddenInLegend = true;
  scrollbarSeries.fillOpacity = 0.5;
  scrollbarSeries.strokeOpacity = 0.5;
  
  var scrollbarX = new am4charts.XYChartScrollbar();
  scrollbarX.series.push(scrollbarSeries);
  chart.scrollbarX = scrollbarX;
  
  
  
  /*
      add ATR
      -&gt; I need to show it under the original chart
   */
  var lineSeriesATR = chart.series.push(new am4charts.LineSeries());
  lineSeriesATR.dataFields.dateX = "date";
  lineSeriesATR.dataFields.valueY = "atr";
  lineSeriesATR.defaultState.properties.visible = false;
  
  // hide from legend too (in case there is one)
  lineSeriesATR.hiddenInLegend = true;
  lineSeriesATR.fillOpacity = 0.5;
  lineSeriesATR.strokeOpacity = 0.5;
  
  
  chart.data = {!! json_encode($candles) !!};
  </code></pre>