Chartjs-Stepped Line with angular-chart.js

by

3đź‘Ť

âś…

This type of chart is well supported.

The reason it’s not working is because, you are configuring the chart in an inappropriate way. $scope.data should be an array of dataset­(s), not an object, and that’s the reason it’s working when you set $scope.data = countdata

To add additional properties for the dataset­(s), you need to set those inside $scope.datasetOverride like so …

$scope.datasetOverride = [{
   steppedLine: true,
   fill: false
}];

Here is a working example on plunker

0đź‘Ť

    lineChartData: ChartDataSets[] = [
    { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  ];

  lineChartLabels: Label[] = ['01.01.2021', '05.01.2021', '15.01.2021', '25.01.2021', '27.01.2021', '31.01.2021'];


  lineOptions: ChartLineOptions= {
    // stepped:true,
  }

  elementChartOptions: ChartElementsOptions = {
    line: this.lineOptions,
  };

  lineChartOptions = {
    // responsive: true,
    steppedLine: true,
    fill: false,
    elements: this.elementChartOptions
  };



  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];

  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';

chartlineoptions should be set as stepped and this configuration should be added cascaded. After that, options should be given [options] at HTML side

<div class="chart-wrapper">
            <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
                [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
                [plugins]="lineChartPlugins">
            </canvas>
 </div>

Leave a comment