Best way to display missing data in a chart?

[mimikim]

Is there a recommended way to display a "no data" datapoint in a chart? Currently, if an entry in the series data array is null or an empty object/array, the graph will simply display it as equal to zero.

It would be confusing or misleading to omit the missing year in the axes, and in my opinion, equally misleading to simply mark it as 0.

This is different than the "No Data" property in Options, as it is not the entire graph that is missing data. (unless I am missing something here!)

So for example, let's say that you have a chart that displays some data from 2014-2018, however you are missing data for 2017.

Is it possible to manipulate the graph to output something like this:

If not, what is the recommended course of action in this case?

Thank you!!

[junedchhipa]

I tried tweaking the data-labels and you can try changing the dataLabels.formatter function to display a custom text for null values.

    plotOptions: {
        bar: {
          horizontal: true,
          dataLabels: {
              position: 'top'
          }
        }
      },
      dataLabels: {
        enabled: true,
        textAnchor: 'start',
        offsetX: 20,
        style: {
          fontSize: '12px',
          colors: ['#333']
        },
        formatter: function (val, {
          ctx,
          seriesIndex,
          dataPointIndex,
          w
        }) {
            if(val === null) {
                return '  NO DATA'
            } else {
                return val
            }
        }
      }

I had to make some changes to the code to make the above code render null values in data-labels.
This will work in the next patch release 3.7.1

The end result would look something like this

[Khanh-Ngy]

I tried tweaking the data-labels and you can try changing the dataLabels.formatter function to display a custom text for null values.

    plotOptions: {
        bar: {
          horizontal: true,
          dataLabels: {
              position: 'top'
          }
        }
      },
      dataLabels: {
        enabled: true,
        textAnchor: 'start',
        offsetX: 20,
        style: {
          fontSize: '12px',
          colors: ['#333']
        },
        formatter: function (val, {
          ctx,
          seriesIndex,
          dataPointIndex,
          w
        }) {
            if(val === null) {
                return '  NO DATA'
            } else {
                return val
            }
        }
      }

I had to make some changes to the code to make the above code render null values in data-labels.
This will work in the next patch release 3.7.1

The end result would look something like this

I do it with my bar chart vue but i can only get text "y" for chart have value, and 'NO DATA' text is not shown. Please help me

[junedchhipa]

@Khanh-Ngy I tested the code and it works fine. Can you check what is in the val in your formatter function? Is it really null or 0?

[Khanh-Ngy]

@Khanh-Ngy I tested the code and it works fine. Can you check what is in the val in your formatter function? Is it really null or 0?

It's really null with my console.log

[junedchhipa]

Ok, then I will have to see a full codepen/codesandbox. Can you please create one?

[junedchhipa]

I meant - a minimal reproducible example :)

[Khanh-Ngy]

I meant - a minimal reproducible example :)

Oh ! Sorry . This is my final chart ^^
The day '2020/01/03 GMT' with NULL doesn't show the text ' NO DATA '

https://codepen.io/khanh-ngy/pen/QWNPGdy?editors=0010

[Sainfuw]

i need this but with grouped bars, any way to do??

[Khanh-Ngy]

i need this but with grouped bars, any way to do??

Hi, my solution was that you can create fake data and use CSS for hiding these fake data