Chartjs-Chartjs display bug when pushing data to graph

by

1👍

app.compontent.html 

<canvas id="line-chart" style="width: 100%; height:250px;"></canvas>

app.component.ts

import { Chart } from 'chart.js';
  chart: any = '';
  ngOnInit() {
 this.chart = new Chart('line-chart', {
      type: 'line',
      data: {
        labels: ["JAN 05", "JAN 06", "JAN 07", "JAN 08", "JAN 10", "JAN 12", "JAN 15", "JAN 20", "JAN 21", "JAN 22", "JAN 23", "JAN 24"],
        datasets: [
          {
            data: [10, 12, 15, 12, 18, 12, 10, 12, 17, 12, 12, 20],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false
          }
        ]
      },
      options: {
        scales: {
          yAxes: [{
            display: false //this will remove all the x-axis grid lines
          }],
          xAxes: [{
            gridLines: {
              display: false
            }
          }]
        },
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem) {
              console.log(tooltipItem)
              return tooltipItem.yLabel;
            }
          }

        }
      }
    });
}

Leave a comment