CODEWITHSUNDEEP
angularchart.jsng2-charts
Reshma
Reshma

Reputation: 502

ng2 scatter chart how to put labels in x axis

Using this scatter chart https://valor-software.com/ng2-charts/#ScatterChart

there is an option to give labels. but its not drawing in the canvas

html

<div>
  <div>
    <div style="display: block">
      <canvas baseChart
        [datasets]="scatterChartData"
        [options]="scatterChartOptions"
        [labels]="scatterChartLabels"
        [chartType]="scatterChartType">
      </canvas>
    </div>
  </div>
</div>

Typescript

import { ChartDataSets, ChartType, ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';


 public scatterChartOptions: ChartOptions = {
    responsive: true,
  };
  public scatterChartLabels: Label[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];

  public scatterChartData: ChartDataSets[] = [
    {
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 3 },
        { x: 3, y: -2 },
        { x: 4, y: 4 },
        { x: 5, y: -3 },
      ],
      label: 'Series A',
      pointRadius: 10,
    },
  ];
  public scatterChartType: ChartType = 'scatter';

How to do give x axis string labels?

here x axis doesnot have label. need help to show label in x axis

Upvotes: 0

Views: 1451

Answers (1)

Chris
Chris

Reputation: 1304

You can use a custom label formatter to display custom values instead of numbers.

values = [
  "3:00 am",
  "7:00 am",
  "11:00 am",
  "3:00 pm",
  "7:00 pm",
  "11:00 pm",
]

public ScattterChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{ticks: {
        callback: value => this.values[value]
      } }],
  }
};

Similar Example: https://stackblitz.com/edit/ng2-charts-bubble-template-g4tbyk

Upvotes: 2

Related Questions