Combining different axis types
amCharts allows any number of any type combined in the same XY Chart.
Below demo demonstrates how you can combine utterly incompatible scales - numeric and date/time - with separate Value and Number axes.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);chart.paddingRight = 20;
chart.dateFormatter.inputDateFormat = "YYYY-MM-dd";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 80;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.tooltip.disabled = true;
var valueAxis2 = chart.xAxes.push(new am4charts.ValueAxis());valueAxis2.renderer.grid.template.disabled = true;valueAxis2.min = 0;valueAxis2.max = 10;valueAxis2.strictMinMax = true;valueAxis2.renderer.minGridDistance = 50;
chart.cursor = new am4charts.XYCursor();
var lineSeries = chart.series.push(new am4charts.LineSeries());lineSeries.xAxis = valueAxis2;lineSeries.dataFields.valueX = "x";lineSeries.dataFields.valueY = "y";lineSeries.fillOpacity = 0.2;lineSeries.strokeWidth = 2;
var candlestickSeries = chart.series.push(new am4charts.CandlestickSeries());candlestickSeries.dataFields.dateX = "date";candlestickSeries.dataFields.valueY = "close";candlestickSeries.dataFields.openValueY = "open";candlestickSeries.dataFields.lowValueY = "low";candlestickSeries.dataFields.highValueY = "high";candlestickSeries.simplifiedProcessing = true;candlestickSeries.tooltipText = "Open:${openValueY.value}\nLow:${lowValueY.value}\nHigh:${highValueY.value}\nClose:${valueY.value}";
var scrollbarX = new am4charts.XYChartScrollbar();scrollbarX.series.push(lineSeries);chart.scrollbarX = scrollbarX;
chart.data = [ { date: "2011-08-01", open: 136.65, high: 136.96, low: 134.15, close: 136.49, x: 0, y: 150 }, { date: "2011-08-02", open: 135.26, high: 135.95, low: 131.5, close: 131.85, x: 1, y: 145 }, { date: "2011-08-05", open: 132.9, high: 135.27, low: 128.3, close: 135.25, x: 4, y: 169 }, { date: "2011-08-06", open: 134.94, high: 137.24, low: 132.63, close: 135.03, x: 5, y: 122 }, { date: "2011-08-07", open: 136.76, high: 136.86, low: 132.0, close: 134.01, x: 6, y: 129 }, { date: "2011-08-08", open: 131.11, high: 133.0, low: 125.09, close: 126.39, x: 7, y: 150 }, { date: "2011-08-09", open: 123.12, high: 127.75, low: 120.3, close: 125.0, x: 8, y: 153 }, { date: "2011-08-12", open: 128.32, high: 129.35, low: 126.5, close: 127.79, x: 9, y: 141 }, { date: "2011-08-13", open: 128.29, high: 128.3, low: 123.71, close: 124.03, x: 10, y: 133 }];<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}combining-date-and-value-axis