This demo shows how we can use a separate ColumnSeries
to add square-shaped fills at any place on an XY chart.
Code
let highlightSeries; function addHighlight(data) { if (!highlightSeries) { highlightSeries = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "y2", openValueYField: "y1", valueXField: "x2", openValueXField: "x1" }) ); } highlightSeries.columns.template.setAll({ templateField: "settings", strokeOpacity: 0 }); highlightSeries.data.push(data); }
var highlightSeries; function addHighlight(data) { if (!highlightSeries) { highlightSeries = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "y2", openValueYField: "y1", valueXField: "x2", openValueXField: "x1" }) ); } highlightSeries.columns.template.setAll({ templateField: "settings", strokeOpacity: 0 }); highlightSeries.data.push(data); }
Demo
See the Pen Using ColumnSeries to highlight square areas on an XYChart by amCharts team (@amcharts) on CodePen.