Line Chart with Range Slider
Displaying parts of the chart differently is a powerful visual aid helping users comprehend the data better. Add an interactive element adjusting the point dividing the parts and you get a powerful analytical tool.
Key implementation details
To change the look of parts of the chart we use the axis range feature of amCharts 5. Except instead of being just an independent axis range (as the name suggests) we create it on the series series.createAxisRange() so that the range settings affect the part of the series falling into it. We fill the area in the range with a patterned fill.
We also add a button as an axis bullet for the range which enables interactivity to allow viewers control the range.
Related tutorials
Demo source