Design expected marked in red box
How such a design can be achieved on highcharts?, especially the red box zone.
The design on the red box area can be different gradient/color's but how to exactly mark such an area on high-charts without points?
The use case is that, suppose the user selects for a date range and there is no data for a specific section on the chart as marked in the above screenshot.
You can use plotBands with pattern fill. For example:
xAxis: {
...,
plotBands: [{
from: -10,
to: 0,
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 3
},
width: 10,
height: 10,
opacity: 0.4
}
}
}]
}
Live demo: http://jsfiddle.net/BlackLabel/Lunqzkgb/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
Docs: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills