Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Horizontal bar graph using ng2-charts in angular2

I am new into using ng2-charts and i wanted to know is it possible to have a horizontal bar graph? I only see a vertical bar graph but i am not sure if that could be altered to include horizontal bar graph. How far can i customize a bar graph in ng2-charts?

like image 448
bluePearl Avatar asked Apr 27 '17 06:04

bluePearl


People also ask

What is ng2-charts?

ng2-charts gives you a baseChart directive that can be applied on an HTML canvas element. Open app.component.html in a code editor and replace the content with the following lines of code: src/app/app.component.html.


2 Answers

For anyone who was wondering about the same thing - i looked into the documentation for chart.js and was able to find just changing the bar chart type to horizontalBar works nicely. public barChartType: string = 'horizontalBar';

like image 122
bluePearl Avatar answered Oct 06 '22 04:10

bluePearl


Bar charts can be used by adjusting the "chartType" option within your baseChart canvas.

<canvas baseChart
        [datasets]="data"
        [labels]="label"
        chartType="horizontalBar">

like image 39
Sabin Bogati Avatar answered Oct 06 '22 04:10

Sabin Bogati