Highlighting regions of a scatter chart
This demo shows how we can add an extra series to highlight multiple regions of a scatter chart (XYChart).
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { ax: 1, ay: 0.5 }, { ax: 2, ay: 1.3 }, { ax: 3, ay: 2.3 }, { ax: 4, ay: 2.8 }, { ax: 5, ay: 3.5 }, { ax: 6, ay: 5.1 }, { ax: 7, ay: 6.7 }, { ax: 8, ay: 8 }, { ax: 9, ay: 8.9 }, { ax: 10, ay: 9.7 }, { ax: 11, ay: 10.4 }, { ax: 12, ay: 11.7 }];
// Create axesvar valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());valueAxisX.title.text = "X Axis";valueAxisX.renderer.minGridDistance = 40;
// Create value axisvar valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());valueAxisY.title.text = "Y Axis";
// Create seriesvar lineSeries = chart.series.push(new am4charts.LineSeries());lineSeries.dataFields.valueY = "ay";lineSeries.dataFields.valueX = "ax";lineSeries.strokeOpacity = 0;
// Add a bulletvar bullet = lineSeries.bullets.push(new am4charts.Bullet());
// Add a triangle to act as am arrowvar arrow = bullet.createChild(am4core.Triangle);arrow.horizontalCenter = "middle";arrow.verticalCenter = "middle";arrow.strokeWidth = 0;arrow.fill = chart.colors.getIndex(0);arrow.direction = "top";arrow.width = 12;arrow.height = 12;
arrow.adapter.add("fill", function (fill, target) { if (target.dataItem) { for (var i = 0; i < area.data.length; i++) { if ( target.dataItem.valueX >= area.data[i].x1 && target.dataItem.valueX <= area.data[i].x2 && target.dataItem.valueY >= area.data[i].y1 && target.dataItem.valueY <= area.data[i].y2 ) { return am4core.color("red"); } } } return fill;});
//scrollbarschart.scrollbarX = new am4core.Scrollbar();chart.scrollbarY = new am4core.Scrollbar();
var area = chart.series.push(new am4charts.ColumnSeries());area.dataFields.valueY = "y1";area.dataFields.valueX = "x1";area.dataFields.openValueY = "y2";area.dataFields.openValueX = "x2";area.data = [ { x1: 2.5, x2: 7.5, y1: 1.5, y2: 12 }, { x1: 9.5, x2: 11.5, y1: 7, y2: 20 }];
area.columns.template.fillOpacity = 0.2;area.columns.template.strokeOpacity = 0;<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: 500px;}highlighting-areas-of-a-scatter-chart