535 questions
1
vote
1
answer
50
views
update data charts js Angular
This is my typescript code:
public barChartData: ChartConfiguration<'bar'>['data'] = {
labels: [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ],
datasets: [
{ data: [ 65, 59, 80, ...
- 3,417
0
votes
0
answers
28
views
My Angular HTML Page doesn't load after populating ng2-chart datasets' data
I'm currently working on an Angular project to develop a dashboard of sorts.
public donutChartData: any = {
labels: [],
datasets: [
{
data: [1, 1, 1],
backgroundColor: [
...
- 1
1
vote
1
answer
41
views
Setting Chart.js scales y title gives compile time error " type '_DeepPartialObject"
I subscribe to data from the backend to fill my charts, when the data is received I would like to set some options so it goes like this:
this.chart.config.options.scales.y.title.display = true;
This ...
- 2,670
1
vote
1
answer
38
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
187
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
121
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
1
answer
50
views
ng2 chart vertical bars not aligning
I am creating an Angular app and I can't align my vertical chart bars with the labels below the ox axis.
These are my Typescript methods responsible for the chart:
prepareChartData(expenses: ...
- 1
0
votes
0
answers
42
views
How to translate labels on the y axis in chart.js matrix plugin?
I am using this chart.js extention to create a matrix where I have values from 0 to n on the x axis and labels in string format like "One", "Two", "Three" on the y axis.
...
- 343
0
votes
0
answers
64
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: '...
- 343
2
votes
1
answer
2k
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
0
answers
46
views
Angular: <google-chart> Is it possible to have all vAxes of the left of the chart?
I have a line chart with multiple vAxes (y) and want all of them on the left. At the moment, only one is on the left and the rest is on the right.
Im using "ng2-google-charts" version 6.2.0 ...
0
votes
2
answers
379
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
83
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
180
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
303
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
0
answers
30
views
How to enable toolbar in chart for angular
How to enable toolbar in chart to print and download from below code, i am using ng2-charts and following from https://valor-software.com/ng2-charts/#BarChart
ngOnChanges() { // Pie this....
0
votes
1
answer
211
views
How to add space between legend and graph in ng2 chart?
I would like to add space between the legend (last evaluation results) and the graph. Basically, if in my example the result is greater than 77, it will collide with the legend.
Check here for my ...
- 256
0
votes
1
answer
29
views
ng2-chart api data gets overwritten when I try populate a line chart
I'm trying to populate 3 lines on graph using ng2-charts like this:
updateOrdersChartOptions(ordersChartData: AllDocsView2Chart) {
if (ordersChartData) {
for (let i = 0; i < ...
- 369
1
vote
0
answers
120
views
Create a Clustered Stacked Bar Chart using Ng2-charts
I am working on ng2-charts Clustered Stacked Bar where I want to achieve clustered stacks. Something similar to attached image, is it possible using Ng2-Charts in angular enter image description here?
...
0
votes
1
answer
124
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
71
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
161
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
533
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
486
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
0
answers
94
views
Angular ng2-charts show empty label
I am starting to use ng2-charts in angular, and when generating a pie chart, it shows me a label at 0, at the top of the pie chart.
This is the configuration part of the piechart
pieChartData: ...
0
votes
1
answer
326
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 ...
- 661
0
votes
1
answer
30
views
Canvas from ng-charts won't be displayed
I am trying to display some charts based on data that I have in my API. However, I am unbale to see the charts even though I can console.log the wanted data. Can anyone tell me where I am wrong ...
0
votes
1
answer
580
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
325
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
148
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
465
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
380
views
How to I insert ng2-chart into jsPdf document?
I have a few line charts that I made using ng2-charts in my program. I was able to tabulate the data onto a jsPdf document with the help of AutoTable
autoTable(doc, {
startY: 190, ...
- 383
1
vote
1
answer
481
views
Implementing different Y-Axes for ng2-chart gives error "not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions"
I'm using ng2-charts on Angular 15 to display a line chart with two sets of data, one of the left side and the other on the right of the Y-Axis. I've followed the following code:
public chart1Data: ...
- 383
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
334
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
140
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,596
0
votes
0
answers
232
views
window.print() : page is printed with lot of empty pages
I have a canvas chart in my html page with other data's which will print roughly 9 pages, but it is printing 638 pages with 629 empty pages.
I'm using ng2-charts in my angular application.
If canvas ...
- 6,735
1
vote
2
answers
878
views
Customize default colors for multi dataset in Doughnut Chart ng2-charts in Angular 14
Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1. I am facing some trouble when trying to customize doughnut chart colors. Here I tried setting colors individually for each datasets, but its not working ...
- 66
0
votes
1
answer
270
views
ng2-chart - barChart color customization not working
Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1.
I am facing some trouble when trying to customize bar chart colors. I also tried ng2-charts 2.0.0. As of now I am getting default colors.
public ...
- 769
0
votes
0
answers
256
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
913
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
160
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 ...
- 807
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
2
votes
0
answers
655
views
Ng2-charts in Angular 13 : Can't bind to 'data' since it isn't a known property of 'canvas'
I'm trying to add ng2-charts to angular application, but it gives me weird errors.
I installed ng2-charts version 3.0.9 with:
npm i [email protected]
npm i chart.js
Then added NgChartsModule to app....
- 35
0
votes
1
answer
262
views
ng2-charts - set default configuration
I'm trying to set default configuration with ng2-charts.
@NgModule({
...
imports: [
NgChartsModule.forRoot({
defaults: {
plugins: {
tooltip: {
...
- 3,650
0
votes
0
answers
26
views
Why are there connections between these points in chartjs?
I have an angular apllication I which I display a chart. The chart is filled with data from a database. The y axis displays sensordata and the x axis displays a timestamp. The timestamp is also a ...
2
votes
2
answers
669
views
Chart JS Zoom Plugins not working when chart data label plugins
Try to use the Chart Js zoom and ChartDatalabels at same time in angular but return the from index All declarations of 'PluginOptionsByType' must have identical type parameters
I tried bleow attached ...
- 45