Adding trendlines to existing chart Chart.js

Question

from hours I've been looking for a solution to add trendlines to an existing chart built with Chart.js

I think we can only add logarithmic trendline on Chart.js ?

I don't want to draw a trendline from scratch, but add 2 trendlines based on existing data of these 2 lines ; please see this fiddle example :

THANK YOU https://jsfiddle.net/blueagency/p88mx3nw/

A big thank you in advance for all your help.

Answer 1

Currently, chart.js does not have a trendline capability at all (not even logarithmic). Perhaps you were getting confused with the custom tick format example at the end of the Common Scale Configuration section?

You could however use the chartjs-plugin-annotation plugin to draw a trendline on your chart, but keep in mind that you would have to implement your own logic to calculate the correct location of the line (and then just use the annotation plugin to actually draw it).

Here is an example demonstrating how to use the plugin (the plugin provides a set of annotation properties that you can add to your charts options. You would then just need to create a function that calculates the trendline and use the result to set the annotation value and endValue properties.

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Drsw Line on Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 2225,
        endValue: 0,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: true,
          content: 'Trendline',
          yAdjust: -16,
        }
      }]
    }
  }
});

You can see it in action at this codepen.