score:-3

example chart with labels is as follows

import { component } from '@angular/core';

@component({
  selector: 'app-root',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css']
})
export class appcomponent {
  title = 'bar chart example in angular 4';

  // add chart options. 
  chartoptions = {
    responsive: true    // this will make the chart responsive (visible in any device).
  }

  labels =  ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

  // static data for the chart in json format.
  chartdata = [
    {
      label: '1st year',
      data: [21, 56, 4, 31, 45, 15, 57, 61, 9, 17, 24, 59] 
    },
    { 
      label: '2nd year',
      data: [47, 9, 28, 54, 77, 51, 24]
    }
  ];

  // chart color.
  colors = [
    { // 1st year.
      backgroundcolor: 'rgba(77,83,96,0.2)'
    },
    { // 2nd year.
      backgroundcolor: 'rgba(30, 169, 224, 0.8)'
    }
  ]
  
  // chart click event.
  onchartclick(event) {
    console.log(event);
  }
}

Related Query

More Query from same tag