Dual date axis with both month and year labels
This demo shows how we can add two date axes to an XY chart to show both monthly and yearly grid/labels.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
var data = [ { date: new Date(2012, 0, 1).getTime(), value: 8 }, { date: new Date(2012, 1, 1).getTime(), value: 10 }, { date: new Date(2012, 2, 1).getTime(), value: 12 }, { date: new Date(2012, 3, 1).getTime(), value: 14 }, { date: new Date(2012, 4, 1).getTime(), value: 11 }, { date: new Date(2012, 5, 1).getTime(), value: 6 }, { date: new Date(2012, 6, 1).getTime(), value: 7 }, { date: new Date(2012, 7, 1).getTime(), value: 9 }, { date: new Date(2012, 8, 1).getTime(), value: 13 }, { date: new Date(2012, 9, 1).getTime(), value: 15 }, { date: new Date(2012, 10, 1).getTime(), value: 19 }, { date: new Date(2012, 11, 1).getTime(), value: 21 }, { date: new Date(2013, 0, 1).getTime(), value: 22 }, { date: new Date(2013, 1, 1).getTime(), value: 20 }, { date: new Date(2013, 2, 1).getTime(), value: 18 }, { date: new Date(2013, 3, 1).getTime(), value: 14 }, { date: new Date(2013, 4, 1).getTime(), value: 16 }, { date: new Date(2013, 5, 1).getTime(), value: 18 }, { date: new Date(2013, 6, 1).getTime(), value: 17 }, { date: new Date(2013, 7, 1).getTime(), value: 15 }, { date: new Date(2013, 8, 1).getTime(), value: 12 }, { date: new Date(2013, 9, 1).getTime(), value: 10 }, { date: new Date(2013, 10, 1).getTime(), value: 8 }, { date: new Date(2013, 11, 1).getTime(), value: 9 }];
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX" }));
var easing = am5.ease.linear;
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxisM = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "month", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 20 }) }));
xAxisM.get("dateFormats")["month"] = "MM";xAxisM.get("periodChangeDateFormats")["month"] = "MM";
var xAxisY = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "year", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 20 }) }));
xAxisY.get("dateFormats")["year"] = "yyyy";xAxisY.get("periodChangeDateFormats")["year"] = "yyyy";
xAxisY.get("renderer").labels.template.setAll({ fontWeight: "bold"});
xAxisY.get("renderer").grid.template.setAll({ strokeOpacity: 0.5});
xAxisY.get("renderer").ticks.template.setAll({ visible: true, strokeOpacity: 0.5, length: 50, dy: -25, location: 0});
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.1, renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var seriesM = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxisM, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }));
seriesM.data.setAll(data);
var seriesY = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxisY, yAxis: yAxis, valueYField: "value", valueXField: "date", forceHidden: true }));
seriesY.data.setAll(data);
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
cursor.lineY.set("visible", false);
// add scrollbarchart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/seriesM.appear(1000, 100);chart.appear(1000, 100);<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: 95vh;}dual-date-axis