Automatically adjust X-axis tooltip color based on series change value
This demo shows how we can use an adapter to adaptively color X-axis tooltip based on series tooltip color, which in turn is based on whether specific data item has a value lower on higher than its predecessor.
xAxis.get("tooltip").get("background").adapters.add("fill", function(fill, target) { return series.get("tooltip").get("background").get("fill");});xAxis.get("tooltip").get("background").adapters.add("fill", function(fill, target) { return series.get("tooltip").get("background").get("fill");});Example
Section titled “Example”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)]);
function generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 1000); firstDate.setHours(0, 0, 0, 0); var value = 1200; for (var i = 0; i < 5000; i++) { var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i);
value += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); var open = value + Math.round(Math.random() * 16 - 8); var low = Math.min(value, open) - Math.round(Math.random() * 5); var high = Math.max(value, open) + Math.round(Math.random() * 5);
chartData.push({ date: newDate.getTime(), value: value, open: open, low: low, high: high }); } return chartData;}
var data = generateChartData();
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { focusable: true, panX: true, panY: true, wheelX: "panX", wheelY: "zoomX" }));
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { groupData: true, maxDeviation: 0.5, baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { pan: "zoom" }), tooltip: am5.Tooltip.new(root, {}) }));
xAxis .get("tooltip") .get("background") .adapters.add("fill", function (fill, target) { return series.get("tooltip").get("background").get("fill"); });
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 1, renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" }) }));
var color = root.interfaceColors.get("background");
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.CandlestickSeries.new(root, { fill: color, calculateAggregates: true, stroke: color, name: "MDXI", xAxis: xAxis, yAxis: yAxis, valueYField: "value", openValueYField: "open", lowValueYField: "low", highValueYField: "high", valueXField: "date", lowValueYGrouped: "low", highValueYGrouped: "high", openValueYGrouped: "open", valueYGrouped: "close", legendValueText: "open: {openValueY} low: {lowValueY} high: {highValueY} close: {valueY}", legendRangeValueText: "{valueYClose}", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}" }) }));
// 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);
// Stack axes vertically// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axeschart.leftAxesContainer.set("layout", root.verticalLayout);
// Add scrollbar// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/var scrollbar = am5xy.XYChartScrollbar.new(root, { orientation: "horizontal", height: 50});
chart.set("scrollbarX", scrollbar);
var sbxAxis = scrollbar.chart.xAxes.push( am5xy.DateAxis.new(root, { groupData: true, groupIntervals: [{ timeUnit: "week", count: 1 }], baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: false, strokeOpacity: 0 }) }));
var sbyAxis = scrollbar.chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
var sbseries = scrollbar.chart.series.push( am5xy.LineSeries.new(root, { xAxis: sbxAxis, yAxis: sbyAxis, valueYField: "value", valueXField: "date" }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}));
legend.data.push(series);
legend.markers.template.setAll({ width: 10});
legend.markerRectangles.template.setAll({ cornerRadiusTR: 0, cornerRadiusBR: 0, cornerRadiusTL: 0, cornerRadiusBL: 0});
// set dataseries.data.setAll(data);sbseries.data.setAll(data);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000);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;}automatically-adjust-x-axis-tooltip-color-based-on-series-ch