ng2-charts line chart with x and y axis value

user_11488995 0
Viewed 2221

I'm trying to display a function with a set of x and y values with ng2-charts. Currently it doesn't diplay my values correctly. enter image description here

My (example) dataset is:

chartDataSet: ChartDataSets[] = [ {
data: [
  { x: 5, y: 7 },
  { x: 10, y: 24 },
  { x: 15, y: 11 },
  { x: 20, y: 57 },
  { x: 25, y: 4 }]}];

As you can see, it only displays the first two points, but the y-axis labels are scaled correctly to 60, so it seems to recognize all points. Also I'd like to have labels like on the y-axis on my x-axis as well.

My component looks like this:

lineChartOptions: ChartOptions = {
responsive: true,
};
chartDataSet: ChartDataSets[] = [ {
 data: [
  { x: 5, y: 7 },
  { x: 10, y: 24 },
  { x: 15, y: 11 },
  { x: 20, y: 57 },
  { x: 25, y: 4 }]}];
lineChartType: ChartType = 'line';

And my HTML like this:

 <canvas baseChart
                      [datasets]="chartDataSet"
                      [options]="lineChartOptions"
                      [chartType]="lineChartType">
              </canvas>

Any suggestions how to solve this? Thanks in advance

ng2-charts angular
1 Answers

Demo you need to scale x Axes to use x and y coordinate in line chart

 lineChartOptions: ChartOptions = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }]
    }
  };
user_25762540
Related