Draggable series axis ranges
This demo shows how we can create a “series axis range” and make it draggable, dynamically adjusting threshold lines and respective series fills.
Open in:New tab
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { category: "Research & Development", value: 450 }, { category: "Marketing", value: 1200 }, { category: "Distribution", value: 1500 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category";series.name = "Sales";
// Create series rangevar seriesRange = valueAxis.createSeriesRange(series);seriesRange.value = 0;seriesRange.endValue = 1000;seriesRange.contents.stroke = am4core.color("#396478");seriesRange.contents.fill = seriesRange.contents.stroke;seriesRange.grid.strokeOpacity = 0;
// Create value axis range for modifying series rangevar range = valueAxis.axisRanges.create();range.value = 1000;range.grid.stroke = am4core.color("#396478");range.grid.strokeWidth = 2;range.grid.strokeOpacity = 1;range.label.text = "Drag me";range.label.background.fill = range.grid.stroke;range.label.fill = am4core.color("#fff");//range.label.parent = chart.leftAxesContainer;range.label.draggable = true;range.label.minX = -22;range.label.maxX = -22;range.label.minY = 0;range.label.inside = true;
range.label.events.on("drag", function () { range.label.maxY = valueAxis.renderer.pixelHeight; range.value = valueAxis.positionToValue( valueAxis.renderer.coordinateToPosition(valueAxis.renderer.pixelHeight - range.label.pixelY) ); seriesRange.endValue = range.value; series.invalidateDataItems();});<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: 300px;}draggable-series-axis-ranges