How to create such a `No Data` greyed out design pattern on Highcharts?

Question

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.

Answer 1

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