Chartjs-Charts.js in Angular 7 – working with imported time for timeseries

by

0👍

✅

I actually did it after checking some more examples, so if anyone is facing similar issues this could help.
In my code above there’s an error where i didn’t insert “labels” which are needed to produce X axis in this case. Doing this with 

ticks: {
          source: this.powerchartMeasurementsX
        }

seems to be wrong and the documentation or samples don’t really explain how things should be used (or they do but in an advanced way). Anyway this is my code for chart which has zoom and pan, includes time series and sets start and end time for the series. If anyone has questions feel free to ask.

this.PowerChart = new Chart('powerChart', {
      type: 'line',
      data: {
        labels: this.powerchartMeasurementsX,
        datasets: [{
          data: this.powerchartMeasurementsY,
          fill: false,
          lineTension: 0.2,
          borderColor: "black",
          borderWidth: 2,
        }]
      },
      maintainAspectRatio: false,
      responsive: true,
      options: {
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem) {
              return tooltipItem.yLabel;
            }
          }
        },
        elements: {
          point: {
            radius: 0
          }
        },
        title: {
          text: "Power",
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }],
          xAxes:[ {
            type: 'time',
            scaleLabel: {
              display: true,
              labelString: 'Time',
            },
            time: {
              unit:'minute',
              unitStepSize:1,
              min: this.powerchartMeasurementsX[0],
              max: this.powerchartMeasurementsX[this.powerchartMeasurementsX.length - 1]
            }
          }
          ]},
          animation: {
          duration: 10
        },
        pan: {
          enabled: true,
          mode: 'x',
          limits: {
            max: 10000,
            min: 1,
          }
        },
        zoom: {
          enabled: true,
          mode: 'x',
          limits:
          {
            max: 10000,
            min: 1
          }
        }
      }
    });
  }

Leave a comment