Radar chart: allow missing data

[flaurida]

Hi Chart.js,

I am trying to build a radar chart with a consistent set of point labels, but that handles the case where not all of the labels have data. Is there a way to only draw points for the labels that have data, and then connect just those points, while still showing the same set of labels consistently? Let me know!

Thanks,
Laura

[etimberg]

@flaurida supporting this should be relatively easy. We already have a spanGaps flag for line charts that skips over NaN data.

I think all that needs to happen is to set spanGaps in here in a similar way to https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.line.js#L71

Then you'd insert NaN for missing data and set spanGaps: true in the options and it should work

const chart = new Chart(ctx, {
  type: 'radar',
  data: {
    datasets: [{
      label: 'dataset',
      data: [10, 20, NaN, 15, 25],
      borderColor: 'red',
      fill: false,
      spanGaps: true
    }],
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding"]
  },
  options: {
  }
})

[flaurida]

Hi @etimberg thanks for the prompt response! I just tried setting spanGaps: true in both the options object as well as in the dataset itself, and then setting the missing values to NaN. However, this does not connect the lines around the missing data point, rather just sets the missing point to zero. See screenshot. Am I missing something?

[flaurida]

If it is helpful, here is a jsfiddle of your suggestion to see the issue more clearly:
https://jsfiddle.net/hvenb74o/28/

[etimberg]

Thanks for the fiddle! This still requires a small code change in src/controllers/controller.radar.js to work. If you're able to try out a custom build locally and see if it works that'd be great.

[flaurida]

Oh awesome, just tried it locally and it works! How can we get this fixed for chart.js?

[flaurida]

Just submitted a PR, hopefully we can merge the fix soon? Thanks again!