My trend line doesn't show up

[invaliduser231]

My code is this:

`

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>

<script type="text/javascript" async>
  let testing;
  async function myFunction() {
    let each = new Array();
    let test = await fetch(
      "https://api.corona-zahlen.org/districts/09462/history/incidence/7"
    );
    /*.then((res) => res.json())
        .then((data) => {
          console.log(data.data["09472"].history);
          data.data["09472"].history
            .slice()
            .reverse()
            .forEach(async (data) => {
                await each.push(Number(data.weekIncidence.toFixed()))
              //document.write(`${data.weekIncidence.toFixed()}<br>`);
            });
        });*/
    testing = await test.json();
    console.log(testing.data["09462"].history);
    return testing;
  }

  myFunction().then((result) => {
    result = result.data["09462"].history;
    function date(date) {
      var date = new Date(date);
      var result = date.toLocaleDateString("de-DE", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });
      return result;
    }
    const labels = [
      date(result[0].date),
      date(result[1].date),
      date(result[2].date),
      date(result[3].date),
      date(result[4].date),
      date(result[5].date),
      date(result[6].date),
    ];
    const data = {
      labels: labels,
      datasets: [
        {
          label: "Inzidenz in Bayreuth",
          backgroundColor: "rgb(255, 99, 132)",
          borderColor: "rgb(255, 99, 132)",
          data: [
            result[0].weekIncidence,
            result[1].weekIncidence,
            result[2].weekIncidence,
            result[3].weekIncidence,
            result[4].weekIncidence,
            result[5].weekIncidence,
            result[6].weekIncidence,
          ],
          fill: false,
          trendlineLinear: {
            style: "#8e5ea2",
            lineStyle: "line",
            width: 1,
          },
        },
      ],
    };

    const config = {
      type: "line",
      data,
      options: {},
    };

    var myChart = new Chart(document.getElementById("myChart"), config);
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

`

[Makanz]

Have you looked at the examples? Need more information of whats not working.
Can you create a jsfiddle that I can look at?

[Sjos12]

I'm getting the same issue while using Chartisan. I'm getting no errors in the console, I'm importing the plugin via the cdn. Here's the code.

const chartisan = new Chartisan({
            el: `#chart${id}`,
            data: chart,
            hooks: new ChartisanHooks()
            .legend(true)
            .colors(colorarray)
            .datasets(objectarray)
            .padding({
                left: 0, 
                right: 0, 
                bottom: 0, 
                top: 20,
            })
            .options({
                options: {
                   // animation,
                    maintainAspectRatio: false,
                    plugins: { 
                        datalabels: {
                            anchor: 'center',
                            clamp: true,
                            align: 'top', 
                            color: () => { 
                                if (type === 'bar'){ 
                                    return 'white'
                                } else {
                                    return '#5D2A42'
                                }
                            },
                        },
                        tooltip: { 
                            enabled: false,
                        },
                        legend: { 
                            position: 'bottom',
                            fullSize: true,
                            labels: {
                                boxHeight: 5,
                                textAlign: 'left',
                                usePointStyle: true,

                                // This more specific font property overrides the global property
                                font: {
                                    size: 15,
                                    family: 'Roboto', 
                                    weight: 'thin',

                                }
                            }
                        }
                    },
                    scales: {       
                        x: {
                            grid: {
                                color: 'white',
                                borderWidth: 2,
                                tickWidth: 2,
                                tickLength: 8,
                                offset: false,
                                borderColor: `rgba(93, 42, 66, ${borderopacity})`,
                                tickColor: '#FFFFFF',
                            },
                            type: 'time',
                            time: { 
                                unit: 'day'
                            },

                        },
                        y: {
                            beginAtZero: () => {
                                if (type == 'bar') {
                                    return true
                                }
                                return false
                            },
                            grid: {
                                color: 'white',
                                borderWidth: 2,
                                tickWidth: 2,
                                tickLength: 8,
                                offset: false,
                                borderColor: `rgba(93, 42, 66, ${borderopacity})`,
                                tickColor: '#FFFFFF',
                            },
                            ticks: {
                                // Include a unit in the ticks
                                callback: function(value, index, values) {
                                    return value + unit;
                                }
                            },

                        }
                    }
                }
            })
        })

[bbohling]

@Sjos12 - I had the same issue...try commenting out type: time. for some reason trendline can't handle that type.

@Makanz are you aware of this issue?

[Makanz]

I have never used Chartisan so I can unfortunately not help you with that.

[leinad9905]

@bbohling encountering the same issue you had but we weren't able to remove type: time yet, did you come up with a solution that could work with type: time ?