Chart.js: Multiple colors in line.

[nawelittle]

Hi, I have a question.
my system receives data undefined, that generates empty spaces in the line.
What I'm looking for is some way to continue the line of another color when the value is undefined or null.

Expected Behavior

Current Behavior

https://jsfiddle.net/palaceslittle/sehf31cy/1/

Environment

• Chart.js version: 2.7.0
• Browser name and version: Google Chrome

[etimberg]

@nawelittle there's no direct way to do this. You might have a good chance by writing a plugin that draws these extra lines the way you need

[EgorOvechkin]

@nawelittle i solved problem with multi color line by adding custom chart type:

  Chart.defaults.multicolorLine = Chart.defaults.line;
  Chart.controllers.multicolorLine = Chart.controllers.line.extend({
    draw: function(ease) {
      var
        startIndex = 0,
        meta = this.getMeta(),
        points = meta.data || [],
        colors = this.getDataset().colors,
        area = this.chart.chartArea,
        originalDatasets = meta.dataset._children
          .filter(function(data) {
            return !isNaN(data._view.y);
          });

      function _setColor(newColor, meta) {
        meta.dataset._view.borderColor = newColor;
      }

      if (!colors) {
        Chart.controllers.line.prototype.draw.call(this, ease);
        return;
      }

      for (var i = 2; i <= colors.length; i++) {
        if (colors[i-1] !== colors[i]) {
          _setColor(colors[i-1], meta);
          meta.dataset._children = originalDatasets.slice(startIndex, i);
          meta.dataset.draw();
          startIndex = i - 1;
        }
      }

      meta.dataset._children = originalDatasets.slice(startIndex);
      meta.dataset.draw();
      meta.dataset._children = originalDatasets;

      points.forEach(function(point) {
        point.draw(area);
      });
    }
  });

[nawelittle]

@EgorOvechkin Hi, first of all thanks for answering.

Do you have an example working please? Implement this library recently.

[EgorOvechkin]

@nawelittle here is example

[mattkemp]

If you want the spanGaps option to work properly (i.e. see gaps for nulls - which is the Charts.js default), then change the following line in @EgorOvechkin 's example above:

      .filter(function(data) {
        return true; // copy all points
      });

[WorldWideWebb]

Any way to access the data for each line segment? I've been digging through the console trying to find that, but to no avail. I have a single line, with 3 properties (a date stamp which is my x axis, a speed which is my y axis, and a heading which is another property). This example works great, but I'd like to change the color of each line segment by that 3rd "heading" property. Any ideas?

edit: should have mentioned I tried doing this with scriptable options, but I could only seem to change the color of points, not the line segments.

[mattkemp]

The way I do it is build up that data set of datetimes and values, then build another data set of the same length with the colours I want the line to be (I change between two colours on each line, one to represent online data and one to represent offline). Then I push that data into the timelineConfig.data.dataset with the function below:

You could do the same thing, where you loop through all your data, look for the heading value, choose the appropriate colour, build up your color array, then pass it in.

params:

settings (json) = {"LineCode":"1607-18696","SensorId":18696,"Label":"Temperature","Unit":"°C","Color":null,"FillColor":"rgba(28,168,221,.03)"}
data = [{"t":"2020-02-14T12:00:00","y":19.2},{"t":"2020-02-14T12:02:00","y":15.2}, ...]
colors = ['rgb(40,167,69)','rgb(40,167,69)','rgb(28,117,48)', ...]

    _PushDataSet : function(settings, data, colors) {
        this.timelineConfig.data.datasets.push({
            label: settings.Label,
            unit: settings.Unit,
            data: data,
            colors: colors,// for multicolorLine - first color is not important

            fill: settings.FillColor !== null,
            backgroundColor: settings.FillColor,

            borderColor: settings.Color, // needed for tooltip
            //pointBorderColor: settings.Color,
            //pointBackgroundColor: settings.Color,
            //pointHoverBackgroundColor: settings.Color,
            //pointHoverBorderColor: settings.Color,
            pointRadius: 0, //1,
            pointHoverRadius: 0, //1,

            lineTension: 0.25,
            pointHitRadius: 5
        })
    },

[WorldWideWebb]

That's a solid idea - will try that out.

EDIT: this worked great. can't believe I didn't see that (was staring me right in the face). You da man.

[Omid-SH]

Hi,
The Solution is to develop your own chart,you can easily create a new custom chart with this command:
Chart.defaults.YOUR_CUSTOM_CHART = some default configuration.
For example I wanna extend default configuration of Line chart in chart.js
simply I would write:
Chart.defaults.YOUR_CUSTOM_CHART = Chart.defaults.line;
Since we wanna draw a continuous line even if some of our points are “null” or “undefined” values,
we should develop a custom draw() for our chart and extend our “line controllers” to have this custom draw function.

Chart.controllers. YOUR_CUSTOM_CHART = Chart.controllers.line.extend({
draw: function(ease){
// your custom implementation for draw function.
}
});

I’ve developed a simple custom chart(considering “null” and “undefined” values) with overridden “draw” function which is also a solution to asked issue.

multi-color-inline