Adding axis ranges to a legend
Axis ranges are data items, so they can be added directly to a Legend data. This demo shows how we can also enhance that capability to replicate axis range appearance in legend markers with custom template setup function.
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 = [ { x: 1, value: 14 }, { x: 2, value: 11 }, { x: 3, value: 12 }, { x: 4, value: 14 }, { x: 5, value: 11 }, { x: 6, value: 11 }, { x: 7, value: 12 }, { x: 8, value: 12 }, { x: 9, value: 13 }, { x: 10, value: 15 }, { x: 11, value: 19 }, { x: 12, value: 21 }, { x: 13, value: 22 }, { x: 14, value: 20 }, { x: 15, value: 18 }, { x: 16, value: 14 }, { x: 17, value: 16 }, { x: 18, value: 18 }, { x: 19, value: 17 }, { x: 20, value: 15 }, { x: 21, value: 12 }, { x: 22, value: 8 }, { x: 23, value: 11 }];
// 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" }));
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.LineSeries.new(root, { minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, name: "Series", valueYField: "value", valueXField: "x", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }));
series.strokes.template.setAll({ strokeWidth: 3});
series.data.setAll(data);
series.bullets.push(function () { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 6, fill: series.get("fill"), stroke: root.interfaceColors.get("background"), strokeWidth: 2 }) });});
// 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);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000, 100);chart.appear(1000, 100);
var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
legend.markerRectangles.template.setup = function (marker) { root.events.once("frameended", function () { var dataItem = marker.dataItem.dataContext; if (dataItem && !(dataItem instanceof am5xy.LineSeries)) { marker.set("stroke", dataItem.get("stroke")); marker.set("strokeOpacity", 1); if (dataItem.get("dashed")) { marker.set("strokeDasharray", [2, 2]); } marker.set("draw", function (display) { display.moveTo(0, 10); display.lineTo(15, 10); }); } });};
legend.data.setAll([series]);
// Function to add process control rangesfunction addLimits(lower, upper) { // Add upper/average/lower lines legend.data.push(createRange(lower, undefined, "Lower control limit", am5.color(0x00ff00))); legend.data.push(createRange(upper, undefined, "Upper control limit", am5.color(0xff0000))); legend.data.push( createRange( lower + (upper - lower) / 2, undefined, "Process average", am5.color(0x4d00ff), true ) );}
addLimits(10, 20);
function createRange(value, endValue, label, color, dashed) { var rangeDataItem = yAxis.makeDataItem({ value: value, endValue: endValue });
rangeDataItem.set("name", label); rangeDataItem.set("dashed", dashed); rangeDataItem.set("stroke", color);
var range = yAxis.createAxisRange(rangeDataItem);
if (endValue) { range.get("axisFill").setAll({ fill: color, fillOpacity: 0.2, visible: true }); } else { range.get("grid").setAll({ stroke: color, strokeOpacity: 1, strokeWidth: 2, location: 1 });
if (dashed) { range.get("grid").set("strokeDasharray", [5, 3]); } }
if (label) { range.get("label").setAll({ text: label, location: 1, fontSize: 19, inside: true, centerX: am5.p0, centerY: am5.p100 }); }
return rangeDataItem;}<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;}adding-axis-ranges-to-a-legend