CODEWITHSUNDEEP
chartshighcharts
Dg980794
Dg980794

Reputation: 45

How to show grid-lines when chart data is empty, in High Stock charts?

I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.

   public drawChart(): void {
        this.options = new StockChart ({
        rangeSelector: {
            selected: 0,
            inputEnabled: false,
        },

        chart: {
            type: 'spline',
        },

        yAxis: {
            labels: {
                formatter: function(): string {
                    return this.value + '';
                },
            },
            opposite: false,
        },

        plotOptions: {
            series: {
                showInNavigator: true,
            },
        },
        series: [],
    });
}

Upvotes: 1

Views: 560

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.

Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Upvotes: 3

Related Questions