Showing X-axis tooltip on top of the chart
This demo shows how we can add an additional date axis to show axis tooltip on top of the chart instead of axis itself.
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)]);
// 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", pinchZoomX: true, paddingTop: 40 }));
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "none" }));
cursor.lineY.set("visible", false);
// The datavar data = [ { date: new Date(2022, 0, 1).getTime(), cars: 1587, motorcycles: 650, bicycles: 121 }, { date: new Date(2022, 0, 2).getTime(), cars: 1567, motorcycles: 683, bicycles: 146 }, { date: new Date(2022, 0, 3).getTime(), cars: 1617, motorcycles: 691, bicycles: 138 }, { date: new Date(2022, 0, 4).getTime(), cars: 1630, motorcycles: 642, bicycles: 127 }, { date: new Date(2022, 0, 5).getTime(), cars: 1660, motorcycles: 699, bicycles: 105 }, { date: new Date(2022, 0, 6).getTime(), cars: 1683, motorcycles: 721, bicycles: 109 }, { date: new Date(2022, 0, 7).getTime(), cars: 1691, motorcycles: 737, bicycles: 112 }, { date: new Date(2022, 0, 8).getTime(), cars: 1298, motorcycles: 680, bicycles: 101 }, { date: new Date(2022, 0, 9).getTime(), cars: 1275, motorcycles: 664, bicycles: 97 }, { date: new Date(2022, 0, 10).getTime(), cars: 1246, motorcycles: 648, bicycles: 93 }, { date: new Date(2022, 0, 11).getTime(), cars: 1318, motorcycles: 697, bicycles: 111 }, { date: new Date(2022, 0, 12).getTime(), cars: 1213, motorcycles: 633, bicycles: 87 }, { date: new Date(2022, 0, 13).getTime(), cars: 1199, motorcycles: 621, bicycles: 79 }, { date: new Date(2022, 0, 14).getTime(), cars: 1110, motorcycles: 210, bicycles: 81 }, { date: new Date(2022, 0, 15).getTime(), cars: 1165, motorcycles: 232, bicycles: 75 }, { date: new Date(2022, 0, 16).getTime(), cars: 1145, motorcycles: 219, bicycles: 88 }, { date: new Date(2022, 0, 17).getTime(), cars: 1163, motorcycles: 201, bicycles: 82 }, { date: new Date(2022, 0, 18).getTime(), cars: 1180, motorcycles: 285, bicycles: 87 }, { date: new Date(2022, 0, 19).getTime(), cars: 1159, motorcycles: 277, bicycles: 71 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Set up secondary X axis to show sum tooltip forvar xAxis2 = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: true }),
tooltip: am5.Tooltip.new(root, {}) }));
// Disable labelsxAxis2.get("renderer").labels.template.set("forceHidden", true);
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function createSeries(name, field, hidden) { if (hidden) { var series = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis2, yAxis: yAxis, valueYField: field, valueXField: "date" }) );
series.strokes.template.setAll({ forceHidden: true });
series.data.setAll(data); } else { var series = chart.series.push( am5xy.LineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, stacked: true, valueYField: field, valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{name}: [bold]{valueY}[/]" }) }) );
series.fills.template.setAll({ fillOpacity: 0.5, visible: true });
series.data.setAll(data); series.appear(1000); }}
createSeries("Cars", "cars");createSeries("Motorcycles", "motorcycles");createSeries("Bicycles", "bicycles");
createSeries(undefined, "cars", true);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/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;}axis-tooltip-on-top-of-the-chart