score:2
Try angular2-chartjs which is very useful angular library for chartjs
npm install angular2-chartjs chart.js --save
npm install @types/chart.js --save
Import and declare ChartModule in app.module.ts
...
import { ChartModule } from 'angular2-chartjs';
@NgModule({
imports: [..., ChartModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
In AppComponent.ts declare chart chart, type, data, options properties and assign values in ngOnInit method
...
@ViewChild(ChartComponent) chart: ChartComponent;
type;
data;
options;
...
ngOnInit() {
this.type = 'horizontalBar';
this.data = {
labels: ["5 star", "4 start", "3 start", "2 star", "1 star"],
datasets: [
{
fill: true,
label: false,
backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
data: [10, 2, 5, 4, 5]
}
]
}
this.options = {
maintainAspectRatio: false,
responsive: false,
legend: { display: false },
title: {
display: false,
text: ''
},
scales:
{
yAxes: [{
// barPercentage: 0.4,
barThickness: 20,
barPercentage: .5,
categoryPercentage: .2,
isFixedWidth: true,
//Number - Pixel width of the bar
barWidth: 20,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
}
}
}
In AppComponent.html template include chart tag
...
<chart #chart [type]="type" [data]="data" [options]="options" style="height: 100%"></chart>
Preview link for implementation of your horizontal bar https://stackblitz.com/edit/angular-geq984
Source: stackoverflow.com
Related Query
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- Problem for display a chart with Chart.js and Angular
- Angular 5 and chart.js ts error
- Chartjs not rendering chart and no error thrown
- Remove additional white space on left and right side of Angular Chart
- Chart.js and Angular - Click Event on Chart
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Angular and CharJS - ERROR TypeError: Cannot read property '15' of undefined
- Angular and ChartJS to create bar chart
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js 3.6.2, Angular 10: Logarithmic Line chart Y-Axis problems. How to set and keep Y-Axis properties, even when data changes?
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- Chart.js returns a console error and does not display the chart when using variables as data input
- How to take data from an API and create a chart on that using Chart.js and Angular 8?
- Multi colored line chart angular and primeng
- Pie chart not working using angular and ng2-charts
- ReferenceError: Chart is not defined with primeNg and angular 4
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - Increase spacing between legend and chart
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chartjs datalabels change font and color of text displaying inside pie chart
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- Chart.js bar chart : Grid color and hide label
- How to use PrimeNg Chart of Width and Height?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
More Query from same tag
- chart.js ajax pushing another dataset always "undefined"
- Tooltips in Chart js are always black instead of the color of the corresponding dataset
- display vertical axis label in line chart using chart.js
- How to access global variable from outside of canvas.onmousemove function?
- Update chart data in angular2-chartjs
- How can I change the position of legends in chart.js?
- (chart.js v3.5.1) change bar background, label font color on click
- Chart.js legend alignment
- Add information on y Chart Js
- All the bar in bar chart stays at left with very little width
- Chart.JS, date issues when upgrading to v3
- System.Collections.Generic.List`1[System.String] instead of data
- Chart.js - Styling Legend - ONE legend entry per line
- Php/ajax return JSON in same form as javascript array
- How to remove left and right padding from the canvas/chart?
- Legend only show on force refresh of page-chartjs
- HTML tags enable in Default tooltip labels in chart.js
- Cannot import chart.js-plugins-annotations
- Transparentize some bars of dataset in ChartJS
- Chart.register is not a function
- How to set the pointDot option on combo stacked bar-line chart
- How to remove color label on tool tip?
- Chart point hover error
- Chart.js modal window
- how to set a custom tick format in chartjs options from laravel controller?
- Correlating separate elements with different heights to line up along vertical center line
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- ReactJs issues with setstate on array in ChartJs
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- Chart.js hiding lable