Highlight areas of an XY chart using a column series

This demo shows how we can use a separate ColumnSeries to add square-shaped fills at any place on an XY chart.

Code

TypeScript

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);
}

JavaScript

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

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Using ColumnSeries to highlight square areas on an XYChartusing-columnseries-to-highlight-square-areas-on-an-xychart