Unable to break the line chart

[heitoreleuterio]

Hi, I'm creating a line chart but I've seen that this Blazor ChartJs implementation don't enables line breaking on line charts like in the original ChartJs. The problem is that datasets can only receive decimal values, which don't allow NaN values. Also is not implemented the SpanGaps property. If this conclusion is an error, please can someone tells me how to do this?

[erossini]

Hello @heitoreleuterio
I haven't implement this function yet. Could you provide me an example of what you need? I'll try to understand how to change the code. So, maybe in the next release I can add this function.

[heitoreleuterio]

My usage would be something like this:

[erossini]

I'm testing this feature. Could you provide me an example in HTML (Codepen?) of the configuration, please? I want to replicate this graph to check if everything is working fine.

[heitoreleuterio]

Sorry for the slow answer. Here is the code:

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Line Chart - Cubic interpolation mode'
      },
    },
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        display: true,
        title: {
          display: true
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Value'
        },
        suggestedMin: -10,
        suggestedMax: 200
      }
    }
  },
};

const DATA_COUNT = 12;
const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push(i.toString());
}
const datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Cubic interpolation (monotone)',
      data: datapoints,
      borderColor: Utils.CHART_COLORS.red,
      fill: false,
      cubicInterpolationMode: 'monotone',
      tension: 0.4
    }, {
      label: 'Cubic interpolation',
      data: datapoints,
      borderColor: Utils.CHART_COLORS.blue,
      fill: false,
      tension: 0.4
    }, {
      label: 'Linear interpolation (default)',
      data: datapoints,
      borderColor: Utils.CHART_COLORS.green,
      fill: false
    }
  ]
};

This example isn't mine, its from the chart.js offical documentation: https://www.chartjs.org/docs/latest/samples/line/interpolation.html

[erossini]

OK Thank you
I'll implement this code for the next release (few days).

[erossini]

The code is ready and you can try the demo here. Tomorrow, I'll release the package

[heitoreleuterio]

OK man thanks. Sorry for the slow answer again, I'll try it and give you some feedback later. Thank you