All Questions
Tagged with chart.js ng2-charts
304
questions
1
vote
1
answer
36
views
Is it possible to create a graph in which a single broad bar contains multiple bars in Angular?
I want to create a graph like this
I haven't been able to find a solution.
I asked ChatGPT for the solution. The code it gave out did not work even after trying to make it work.
At the end of ...
- 838
1
vote
1
answer
60
views
Issues with Installing ng2-charts and chart.js in Angular Standalone Component
I'm currently working on an Angular project where I want to implement charts using ng2-charts and chart.js. However, I'm facing some dependency resolution issues. Here’s a summary of the situation:
...
- 11
1
vote
1
answer
71
views
Applying custom plugins to specific charts in Chart.js (not globally)
I have 3 charts on a component in my angular app.
I need to create text label plugins to show on the chart. Each chart needs to have specific plugin assigned to it. I have searched a lot and could not ...
- 15
0
votes
0
answers
63
views
Overflowing tooltips with custom callback
I use ng2-charts 6.0.1 and with using of line chart label callback and following settings:
lineChartOptions = {
scales: {
xAxis: {
type: 'time',
ticks: {
source: '...
- 346
2
votes
1
answer
1k
views
Upgrading to latest angular 18 with ng2-charts errors on nsg-serve
Upgrading angular 18 with ng2-charts 6.0.1 on running n-serve throws error as below
imports ng2-charts, chart.js,chartjs-plugin-annotation. nothig helps and throws error.
I am trying to use in npn -...
- 149
2
votes
0
answers
48
views
Is there a way I can determine start position of an animation in chart.js using a websocket datasource?
I have implemented an area chart in my angular application using chart.js (ng2-charts). Data is populated on the chart using a WebSocket. However, when animating the inserted data point, the curve ...
- 31
0
votes
2
answers
332
views
How do I pass arguments to a globally registered plugin in ng2-charts (alternatively, how do I register it locally)?
I have the following problem with ng2-charts (version 4.1.1, chart.js being version 4.4.0): I made a plugin to color different parts of a line chart according to some threshold values. I got help from ...
- 167
1
vote
1
answer
72
views
Angular component ngDestroy not getting called and charts are not getting destroyed
I'm migrating existing chart js 2 code to 3.9.1 and upgraded angular 14 to 16. Here is my code:
chart-line.component.html
<!--chart container -->
<div id="container">
<div ...
1
vote
0
answers
172
views
Is it possible to change barThickness for data points of a ChartJS Horizontal bar per dataset?
I am using "chart.js": "^4.4.1" & "ng2-charts": "^4.1.1".
For my dataset.data.point which in an array of objext having x and y points.
I want to set the ...
- 11
1
vote
1
answer
259
views
i try to make pie graph on angular and i use Chartjs and i get error when i try run my project
code share below:
html
<div>
<canvas baseChart
[data]="pieChartData"
[colors]="colors"
[labels]="pieChartLabels"
[...
- 11
0
votes
0
answers
1k
views
'ChartsModule' does not appear to be an NgModule, Component, Directive, or Pipe class
I have installed chart.js and ng2charts, the version details are below:
"chart.js": "^2.9.4",
"chartjs-gauge": "^0.3.0",
"ng2-charts": "^2.4.3&...
0
votes
1
answer
120
views
How to assign yAxisID to ChartJs datapoint
I have following dataset:
[
{data: [100, 50, 0.5], backgroundColor:'#506f86', borderColor: '#506f86', hoverBackgroundColor:'#384e5e', hoverBorderColor: '#384e5e', label: 'Service'},
{data: [80,...
0
votes
0
answers
67
views
Getting TypeError when trying to destroy Chart.JS object
I am developing an Angular application with a component that utilizes Chart.js to draw bar graphs from queries.
Software versioning info:
Angular CLI: 14.2.12
Node: 14.21.3
NPM: 6.14.18
Chart.js: 2.9....
- 99
-1
votes
1
answer
157
views
Why can't I put two charts on the same page Chart.Js and dynamically update the data
I have put 2 charts on the same page (Bar Chart and Line Chart) and I am dynamically changing the data. Both charts show up, but only the one at the top gets updated. I can't figure out why this ...
0
votes
2
answers
505
views
How to remove Grid lines and axes in angular ng2-charts?
I am using Angular 16 and ng2-charts to display a basic line chart.I would like to remove the grid lines from the chart.I dont find an option to do that.Can someone help me with this?
<div class=...
1
vote
1
answer
461
views
Using Chart.js and Ng2-Chart in Cumulocity
I am currently building an Angular application to be hosted on the Cumulocity IoT platform, and I am trying to use Chart.js to generate custom bar charts. This did not work at first, so I did a little ...
- 99
0
votes
1
answer
303
views
Angular 9 Chart.js stacked bar chart with multiple bars
I implemented Chart.js in my Angular 9 application. There expect chart values are not coming.
I have an API response in that I want to make barChartData as below mentioned way stackblitz Demo.
This is ...
- 651
0
votes
1
answer
572
views
ng2-charts - Highlighting a series when hovering over the corresponding legend label
I'm using the ng2-charts library in my Angular application to display charts. I would like to implement a feature where, when hovering over the corresponding legend label of a series, that series gets ...
user17182037
0
votes
1
answer
313
views
Chart.js Bar-Chart Overlaps when screen size too small
Good day first, I have this problem when the screen width is too low that the bar chart overlaps. I suspect that it is due to maintainAspectRatio. But since I set this propertie to false because I ...
user17182037
0
votes
1
answer
147
views
showLine property of scatter chart in ng2-charts is not working
The title pretty much sums it up. Even though I set the showLine property to true in the ChartConfiguration the dots are not connected with a line in the chart.
I tried with the following versions:
&...
- 75
2
votes
0
answers
449
views
Angular ng2-charts mixed chart x axis problem
in my example im using Angular 15.2.4 and ng2-charts version 4.1.1 with chart.js 4.2.1
im trying to figure out an effective method how to draw a line chart over a bar chart. It should go uninterrupted ...
user17182037
1
vote
1
answer
1k
views
chartJs Stacked bar chart border and legend not working
I required stacked bar chart as below:
my stackblitz link :
stackblitz
In this reference code I want to archive left-end side part border radius.
Also legend show each block of the bar-chart and its ...
- 169
1
vote
2
answers
322
views
Angular Push JSON data into Array
im trying to figure out how to push a json object into an array using typescript. I managed to do it with one value of the json object but i need to do it with the second one too.
Heres the Structure ...
user17182037
0
votes
1
answer
139
views
Chart.js: how do I group labels in toolips?
I'm migrating a project from ng2-nvd3 (based on D3) to ng2-charts (based on Chart.js) because ng2-nvd3 is no longer maintained.
My app has a blood pressure chart that shows both systolic and diastolic ...
- 8,586
0
votes
0
answers
250
views
trying to change color of the line graph, two different colors for positive and negative values
I am using the below code snippet but context.dataIndex is always undefined.which is what i believe might be causing the issue.
I am using an API to fetch data.
"chart.js": "^2.9.3"...
- 21
0
votes
1
answer
898
views
Chart.js - How to parse array of objects as the dataset for Pie Chart
I have Chart.js and chart data in this format:
chartData = [
{ data: 2, label: 'Label 1' },
{ data: 10, label: 'Label 2' },
{ data: 40, label: 'Label 3' },
];
How can I parse my data to get ...
- 101
0
votes
1
answer
155
views
Type 'Record<string, unknown>[]' is not assignable to type 'Plugin<any, AnyObject>[]'
I am trying to implement chartJS in my angular project and I am using ng2-charts. When I follow the documentation written here: https://valor-software.com/ng2-charts/#GeneralInfo my project breaks ...
- 797
0
votes
2
answers
1k
views
NG2-Charts - How to change cutout width for doughnut chart
I am working on a corporate project using Angular 14, ChartJS (4.1.2), and NG2-Charts (4.1.1). and I am having some trouble when trying to change the width of the doughnut chart. I show a picture of ...
- 653
1
vote
2
answers
2k
views
Chartjs Doughnut cutout option not working
I have upgraded my chartjs and ng2-charts from 2-* to latest version. After updating the packages faced some issues in the properties and fixed those issues. But in the Doughtnut chart, cutout option ...
- 11
1
vote
2
answers
722
views
Can one fill the background of the Axis of a radar Chart?
Can I fill the Background of a Radar Chart like in the picture below?
I'm Using Chart.js version 3.9.
My code for now looks like this:
this.chart = new Chart(spiderChart as ChartItem, {
...
- 104
0
votes
1
answer
629
views
Click Event Not working below the x-axis line in chart Js (Angular)
I am using Chart JS ,try to make click event in bar chart labels,click event not working below the x axis and I try some other achieve this in click event in canvas ,but it not working
HTML code:
<...
- 45
0
votes
1
answer
331
views
Setting cutout value of ng2-chart doughnut
Same problem as here
but I get the following error:
Type 'keyof ChartTypeRegistry' is not assignable to type '"doughnut"'.
When I try to implement it.
Looked into the chartConfiguration docs ...
- 11
0
votes
2
answers
2k
views
Angular11 update, ng2-charts, Error: Can't import the named export 'Chart' from non EcmaScript module (only default export is available)
I am currently working on updating the angular version of a project. It was v10 and I updated to v11. Fixed many errors, but ng2-charts keep throwing these errors on ng serve.
Error: node_modules/ng2-...
2
votes
0
answers
199
views
How to get data label on bar chart using chartjs with Ng2Chart
I have Angular project in which i have implemented bar chart using chartjs. Also get same behaviour as define in document but my requirement is to display value of it on bar like below:
enter image ...
- 169
4
votes
1
answer
495
views
ng2-charts and chart.js Error 0x80004005 (NS_ERROR_FAILURE) computeLabelSizes only in Firefox
In an Angular/Ionic project, I am totally bamboozled by the following error.
ERROR:
ERROR Error: Uncaught (in promise): [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)...
- 181
0
votes
1
answer
788
views
ChartJs place values outside of the pie chart
I am having a problem understanding the documentation of the ChartJS. I would like my values to be outside of the chart visible not in the tooltip but I am having problems understanding how to create ...
- 797
1
vote
1
answer
1k
views
How can I implement a custom dataset data structure for a Line Chart.js?
How can I implement the custom property data structure for a dataset as mentioned below without hacking the index.esm.d.ts file?
I want to implement a custom dataset data structure similar to here in ...
- 65
0
votes
1
answer
28
views
DataLabel-plugin Value changes in X and Y Data Structure
I used the Data label plugin to show Y value only, but as data structure attached below to show x and y axis
public barChartData:any ={
datasets: [
{
data: [{x:'Sales', y:20}, {x:'...
- 45
2
votes
1
answer
1k
views
chart.js Scale Label not working Chart js in Angular 14
public barChartOptions: any = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [
{
grid: {
display: false,
},
scaleLabel: {
...
- 45
0
votes
0
answers
25
views
ng2-charts image in x-axis ticks [duplicate]
I'm using the ng2-charts wrapper for ChartJS in Angular, and attempting to place an image along with the text in my x-axis ticks like this:
My component looks like this, just using static data at ...
- 47
0
votes
1
answer
146
views
Polar Area Chart with equal sized section
I would like to create an Polar Area Chart with equal size sections (not based on the actual value) like this with ng2-charts: Example
I thought that using the scales.r.max setting at 1 will create ...
0
votes
1
answer
918
views
Refresh ng2-chart when new api call is made
The bar chart I have is populated from an API call. The API accepts a filter therefore, I would like for the chart data to be updated when an option is selected from a dropdown list. There is only ...
- 263
0
votes
1
answer
346
views
Angular | ChartJs Annotation Plugin - Link the position of a line to the mouse
I try to create a crosshair with the annotation plugin, I manage to modify the value of my line but it does not update on the chart.
Here is an overview of my chart options :
public ...
- 45
0
votes
2
answers
676
views
Chart data will not load in ng2-charts/Chart.JS
I'm trying to create a simple line chart with ng2-charts. If I use hard coded data for my data, it works fine. I'm trying to use a variable which is an array of strings, but when I use the variable ...
- 1
1
vote
1
answer
986
views
How to use both left and right yAxes in ng2-chart?
This is my demo.
Output: I want line is follow right yAxes
I set yAxes by ID but it's not working. The percent line is still follow left yAxes.
where am I wrong?
datasets = [
{
data: [3, 10, 4],...
- 573
0
votes
1
answer
541
views
NG0303: Can't bind to 'type' since it isn't a known property of 'canvas'
I did following steps:
npm install ng2-charts@next --save
It installed
"ng2-charts": "^3.0.0-rc.7"
npm install chart.js --save
It installed
chart.js": "^2.9.4",
...
- 323
1
vote
2
answers
732
views
Show datalabels only if label value > 0
I have a question regarding ng2 charts.
This is my component.ts file.
public barChartOptions: ChartConfiguration['options'] = {
responsive: true,
// We use these empty structures as ...
- 21
1
vote
2
answers
2k
views
How to set cutout on doughnut chart using ng2-charts?
I need some help figuring out how to set config options on my doughnut chart using ng2-charts. In particular, I would like to set the cutout property on my chart. I have read all the documentation ...
- 115
2
votes
1
answer
636
views
ChartConfiguration missing 'time' parameter in 'options.scales.x'
I'm updating from chartjs 2.9.4 to 3.8.0 and I'm getting an error setting options.scales.x.time.unit parameter on an ChartConfiguration object.
error TS2339: Property 'time' does not exist on type
'...
- 175
2
votes
1
answer
933
views
Chart.js bar chart with nested array
I would like to make a re-useable, stacked bar chart with @Input() properties in Angular. My data is a nested array.
I cannot figure out how to correctly setup my chart, I always get the error in the ...
- 91