The ng-2 charts library wraps the Charts.js library to make it easily accessible in Angular 2+.
Questions tagged [ng2-charts]
530 questions
9
votes
5 answers
Chart.js & Angular 2 - ng2-charts Custom on Click Event
I am trying to implement ng2-charts in my Angular 2 project and I was wondering about creating custom onclick events. Meaning, I want to override the current onclick events on the carts to do some custom functions (redirect to a page, have a modal…
blubberbo
- 4,441
- 4
- 23
- 36
8
votes
2 answers
error TS2322: Type 'string' is not assignable to type 'keyof ChartTypeRegistry'
home.component.ts
global: boolean = false;
country!: string;
data: GlobalData;
dailyData: any[] = [];
countries: any[] = [];
lineChartData: any[] = [
{
data: [65, 64, 33, 44],
label: 'Temp label'
}
];
lineChartType =…
Mahfuz Shuvo
- 125
- 1
- 2
- 7
8
votes
1 answer
Customizing Legend Shape in ng2-charts
I am working on Pie Chart in ng2-charts. I am trying to customize the default shape of legend. I could change the position of legend but Is it is possible to change the shape? Does it have any inbuilt property or we have to customize?
HTML
Chris
- 1,236
- 2
- 18
- 34
8
votes
2 answers
Stacked Bar in ng2-charts
I have gone through the documents of ng2-charts but I couldn't find anything like Stacked Bar. Is there is any other way to achieve Stacked Bar chart in ng2-charts? Please help me out
Felix Christo
- 257
- 6
- 19
8
votes
2 answers
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…
bluePearl
- 1,237
- 4
- 24
- 42
8
votes
1 answer
ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'
Versions: Cordova: 6.3.1, Gulp CLI: 1.2.2, Ionic framework: 2.0.0-rc.0, Ionic CLI Version: 2.1.0
I'm using ng2-charts in my ionic2 application.
Import not import {ChartsModule} from "ng2-charts";
but import {ChartsModule} from…
Ivar Reukers
- 7,560
- 9
- 56
- 99
7
votes
2 answers
ng2-charts - How to label y axis?
Unable to figure out how to label y axis using ng2-charts. Documentation only seems to have info on labelling x axis and using charts.js method directly yields no result.
Form component.ts:
public barChartOptions = {
scaleShowVerticalLines:…
reCursed
- 165
- 1
- 3
- 14
7
votes
3 answers
ng-2 Charts: can't get bar chart axis to start at 0
I am trying to use ng-2 Charts so that I can have a simple responsive barchart in my angular application.
The numbers in my data set are pretty small. The smallest is 0 and the largest is 5. Most of the time the numbers come within 1 point of each…
onTheInternet
- 6,421
- 10
- 41
- 74
7
votes
6 answers
7
votes
1 answer
Border radius for the bar chart in ChartJS
I am creating a stacked bar chart using ng2-chart which is the Angular-2 version of ChartJs .
I am trying to create bar chart with border- radius as mentioned in the attached image, but unable to find the option to achieve this,
please suggest me…
Naju
- 1,541
- 7
- 27
- 59
7
votes
2 answers
ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
I am using ng2 charts from valor software with my angular 2 app. I am not able to figure out how to customize the whole html content of the default tooltip that is displayed when hovering over a bar chart.
Any ideas?
Update:
Here is my html/markup…
user1892775
- 2,001
- 6
- 37
- 58
7
votes
1 answer
Resize the width and height of the ng2-charts
How do I set a chart's width and height using ng2-charts? I'm making a Bar chart, just like the demo on the ng2-charts site.
public doughnutChartLabels:string[] = ['EMI', 'Car', 'Food', 'Fuel'];
data:number[] = [3350, 5450, 4100, 1000];
public…
sridharan
- 2,011
- 10
- 36
- 61
6
votes
1 answer
How can I get multiple charts(bar and line) with ng2-charts?
I have bar chart and I want to draw average line on this bar chart.
My solution:
In data sets, I add element with type as 'line':
https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts
public barChartLabels: Label[] =…
Minh Tien Tran
- 1,038
- 9
- 11
6
votes
1 answer
zoom and pan on charts in angular
I have a problem on angular ( v5) with this plugin:
ng2-charts ( from charts.js)
chartjs-plugin-zoom
hammer.js
I have a simply chart and i'd like to zoom and pan on this, but it doesn't works.
I upload my code here so you can check...
I think I…
Nicolò Scapin
- 240
- 1
- 4
- 15
6
votes
2 answers
How to display the labels in doughnut chart using ng2 charts?
I am using ng2 doughnut chart to display some items, Its all working fine as per the doughnut chart documentation but the thing i need to change is, the display of label of each slices comes only on hover but the thing i need is it should be in…
Maniraj Murugan
- 8,868
- 20
- 67
- 116