Agfdhyk

please, I'm trying to create with AmCharts 4 chart with multiple data sets. In previous version it is done this way: https://www.amcharts.com/demos/multiple-data-sets/
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 add ATR -> I need to show it under the original chart.

Thank you very much for any help.
Have a nice day!

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

    -> 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) !!};

AmCharts 4 does not have the stock chart implemented yet. You can approximate panels and synced cursor and zoom by using the chart's containers to create additional charts and using the API to make the cursor and scrollbar affect all the charts.

You can create each chart and push them onto the chart container like so:

var container = am4core.create("chartdiv", am4core.Container); //create the container

container.width = am4core.percent(100); //set dimensions and layout

container.height = am4core.percent(100);

container.layout = "vertical";

// ... for each chart

 var chart = container.createChild(am4charts.XYChart);

// ..set up as usual

While setting up each chart, you'll need to set up events to sync up zoom events:

  // whenever any of the charts is zoomed, we should zoom all other charts

  dateAxis.events.on("selectionextremeschanged", function (event) {

    syncDateAxes(event.target);

  })

  // ...



function syncDateAxes(syncWithAxis) {

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var dateAxis = chart.xAxes.getIndex(0);

    if (dateAxis != syncWithAxis) {

      dateAxis.events.disableType("selectionextremeschanged");

      dateAxis.start = syncWithAxis.start;

      dateAxis.end = syncWithAxis.end;

      dateAxis.events.enableType("selectionextremeschanged");

    }

  }

}

You'll also want to set up each chart's cursor and sync each of them up:

function initCursorListeners() {

  cursorShowDisposers = ;

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;

    cursor.interactionsEnabled = true;



    cursorShowDisposers.push(cursor.events.on("shown", function (event) {

      handleShowCursor(event.target);

    }));

  }

}



var shownCursorChangeDisposer;

var shownCursorZoomStartedDisposer;

var shownCursorZoomEndedDisposer;



function handleShowCursor(shownCursor) {

  // disable mouse for all other cursors

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;

    if (cursor != shownCursor) {

      cursor.interactionsEnabled = false;

    }

    // remove show listener

    cursorShowDisposers[i].dispose();

  }



  // add change disposer to the hovered chart cursor

  shownCursorChangeDisposer = shownCursor.lineX.events.on("positionchanged", function (event) {

    syncCursors(shownCursor);

  });





  shownCursorZoomStartedDisposer = shownCursor.events.on("zoomstarted", function (event) {



    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      if (cursor != event.target) {

        var point = { x: event.target.point.x, y: 0 };

        cursor.triggerDown(point);

      }

    }

  });



  shownCursorZoomEndedDisposer = shownCursor.events.on("zoomended", function (event) {

    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      if (cursor != event.target) {

        var point = { x: event.target.point.x, y: 0 };

        cursor.triggerUp(point);

      }

    }

  });





  shownCursor.events.once("hidden", function (event) {

    shownCursorChangeDisposer.dispose();

    shownCursorZoomStartedDisposer.dispose();

    shownCursorZoomEndedDisposer.dispose();



    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      cursor.hide(0);



      cursorShowDisposers[i].dispose();

    }



    initCursorListeners();

  });

}



function syncCursors(syncWithCursor) {

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;



    var point = { x: syncWithCursor.point.x, y: 0 };



    if (cursor != syncWithCursor) {

      cursor.triggerMove(point);

    }

  }

}

There are other UI tweaks you can make like disabling the zoom out button on other charts except the top-most one as well as showing the date axis labels on just the last chart.

Here's a full demo on how to do all of this. This is also included in the examples folder in the AmCharts zip file.

If you're using Stock Chart, you might want to hold off.

Stock chart is not yet available for V4. We're planning it for the
second part of 2018. No exact ETA, yet. Sorry.

https://www.amcharts.com/docs/v4/getting-started/migrating-from-v3/#No_Stock_chart_yet