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);
}
}
Source: stackoverflow.com
Related Query
- how to show data label on barchart using chart.js in Angular10 project?
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- how to show data value on bar chart body rather than using tooltip?
- chart js tooltip how to control the data that show
- Chart JS show multiple data points for the same label
- PrimeNg bar chart how to show a label for the y-axis
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- Using chart js version 3, how to add custom data to external tooltip?
- How to display chart using Chartjs with JSON data in Laravel
- How to show slice value inside of slice in pie chart using chart.js
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to show group by data just like sample image using Chart.js?
- How to send data to chart js using angular
- How to get Data from API to display chart using chartjs in Vuejs
- How to show tooltip value of all data falling on the same axis in chart js?
- How to get the data attribute of the canvas chart created using chartjs
- How to show the chartjs bar chart data values labels as text?
- how to show speedometer on Doughnut chart in chart.js using reactjs
- How can i display my data in a chart using chart js
- How to show tooltip only when data available in chart js?
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- How show data label in the graph on Chart.js?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- How to set Solid label in bar chart using Chart JS
More Query from same tag
- Is there a way to highlight a line on a line graph with hover?
- Show value on Mixed chart, Charts.js
- Can't update chart
- Not able to pass array of data to chart.js in React
- How to keep rounded bar corners when data is filtered chartJs?
- How to pass variable (list) to JavaScript in Django?
- How to use async data for use with chart.js in ionic
- Send data from php to chart with ajax
- ChartJs: X Axis labels cutting at bottom
- Wrong tootip in chartjs
- Chart.js legend alignment left side
- Add new line in es6 inside a doughnut chart
- Foreground chart by mouse
- Limit labesl on chart.js bar chart
- How to add background color between two specific lines in Chartjs 3.1
- Chartjs custom colors not displaying when dataset is changed
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- How do I prevent my chart from rerendering? (ReactJS)
- How to set percentage value by default on each bars in horizontal bar chart js
- How to create two x-axes label using chart.js
- Chart.js (Radar Chart) different scaleLineColor for each scaleLine
- How can I filter these data per month?
- Use Chart.js draw method as Typescript arrow function
- How to implement scattered chart using chart.js which is not available by default?
- Text inside Doughnut chart using Chart.js and Angular2, Ionic2
- ChartJS bar not showing up for simple data points
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- Creating a horizontal bar chart extension on Chart.js
- Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis
- interactive Button doesn't hide the chart as I intended