CODEWITHSUNDEEP
javascriptangularcharts
Angelux
Angelux

Reputation: 99

Chart.js simple line graph

I have a problem with simple chart.js graph in angular

HTML:

<div class="row">
  <div class="col-12"><strong>Výškový profil</strong></div>
  <div class="col-12">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [chartType]="'line'"
            [colors]="lineChartColors"
            [legend]="false"
    ></canvas>
  </div>
</div>

Note: there is a bootstrap container in the page so grid system is fine

Typescript

public barChartOptions:any = {
    chartType: 'line',
    legend: false,
    responsive: true,
};
public barChartLabels:string[];

public barChartData:any[] = [{data:[10,200,30,40]}];

public lineChartColors:Array<any> = [
    {
        backgroundColor: '#23CE6B',
        borderColor: '#23CE6B'
    }
];

The problem is, If i can this sample (the data are just dummy they will be loaded from API) I get this result

enter image description here

And thats not what I've expected.

There are just 2 points from 4 (from 10 do 200). How can I modify this to show whole data graph?

Plus one question can I put the label for Y axis? (on the left side of the numbers)

Upvotes: 0

Views: 489

Answers (1)

Kenny Alvizuris
Kenny Alvizuris

Reputation: 445

If you are using ChartJS 2.0 or above, you can customize your graph by modifying the scales property in the options object:

options = {
    scales: {
    yAxes: [{
        scaleLabel: {
        display: true,
        labelString: 'Your Y axis label'
      }
    }]
  }
}

Depending on your version, you might want to set the option: bezierCurve: false or tension: 0 I have the feeling your points are being plotted but your curve is too round and filled with a background color that you cannot tell.

Upvotes: 1

Related Questions