Highcharts adding labels/columns with no data

Question

I'm having a problem with Highcharts drawing points that have no data attached to them. The chart is a column chart with drilldown, showing an average "time" per week on the top level, with a drilldown displaying the actual value per case for the selected week.

My problem is this: When I drill down into a certain week, cases that do not exist are still displayed on the chart if they exist between two existing case IDs.e.

Consider the data being passed for week 6: [[272, 25.07][297, 500.54]], only two cases exist: 272 and 297. However, Highcharts is giving me this:

https://i.stack.imgur.com/MpABB.png

This is the code for the chart itself:

                Highcharts.chart('DrilldownChart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: "",
                    labels: {
                        rotation: 90
                    },
                },
                yAxis: {
                    title: {
                        text: ''
                    }

                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        minPointLength: 0
                    },
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: false,
                            format: '{point.y:.1f}',
                            rotation: 270
                        }
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
                },

                series: MainDataArray,
                drilldown: {
                    series: DrilldownDataArray,
                }

            });

Does anyone know how to stop it from drawing the labels/columns between points with actual data?

Thanks!

Can you give an example (e.g.: jsfiddle), it'll be easier to help you :) — Maxime Lafarie

daniel_s daniel_s · Accepted Answer · 2018-04-24T13:32:14

You just need to convert the x values from your array to String type, then they would be treated as a category name instead of category indexes. In order to convert it, you can use Array.map() function just like that:

var drilldownSeries = [{
    id: 'One',
    data: [[272, 25.07], [297, 500.54]].map(elem => {
        return [elem[0].toString(), elem[1]]
    })
  }]

However, before that please make sure that your xAxis.type is set to 'category', because I noticed that in your code there is an empty string assigned to type field.

Here is the example which shows how to achieve described effect: https://jsfiddle.net/8h03urrr/

Highcharts adding labels/columns with no data

1 Answers