chartjs-trendline implement a dashed line?

72 Views Asked by At

using chartjs and chartjs-trendline plugin. I am attempting to satisfy the ui by implementing a dashed trendline. However this is proving to be a significant challenge to me. I have suggestions ranging from borderDash[], to lineDash[] to just using dashed.. and none are working. my current code is as such:

 this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: value.map(x => x.key),
          datasets: [
            {
              label: "Trend",
              showLine:false,
              lineDash:[5,5],
              data: value.map(x => x.value),
              pointBorderColor: this.trendcolour,
              pointBackgroundColor: this.trendcolour,
              borderColor: this.trendcolour,
              backgroundColor: this.trendcolour,            
              trendlineLinear: {
                style: this.trendcolour,
                lineStyle: "solid",
                lineDash:[5,5],
                width: 2,
                options:{
                  lineDash:[5,5],
                  borderDash: [10,10]
                }
              },
            } as any
          ]
        },
        plugins:[chartTrendline]
       });

produces: enter image description here

Is there a way, using this plugin.. to achieve a dashed line as opposed to dotted or solid? Thank you for any advice you might have.

0

There are 0 best solutions below