All Questions
965
questions
1
vote
1
answer
28
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,660
0
votes
0
answers
28
views
Move ChartJS charts to original position when window maximized
I have a page with multiple charts using ChartJS, each contained in its own div like so:
<div class="formgrid grid gap-2">
...
- 81
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
1
vote
0
answers
49
views
Chartjs: chart is blurry when using webworker
I am trying to use chart.js with webworker.
I am able to create the webworker and show the chart on the screen with the right dimensions.
The problem is: the chart is blurry and a bit "zoomed in&...
- 311
1
vote
0
answers
51
views
Line chart rendering based on dynamic duration changes with suffixes
prTimeToMergeChartOptions : any = comboChartOptions;
prTimeToMergeChartsOptions(){
this.prTimeToMergeChartOptions.scales.x.title.text = "duration"
this.prTimeToMergeChartOptions....
1
vote
0
answers
36
views
Odd behaviour when changing screens in Angular application
I have a dashboard page with visualisations where their height and width are set to be 100% of their container. When I shrink the page manually it works, but when I switch screens I have to refresh ...
- 59
0
votes
1
answer
50
views
I want to make only border top and border bottom to a doughnut chartjs
Problems :
I have the border left who add an triangle border left and right
And i have the natif problem of responsive legend size, i want to add css on segment but not on legend of this segment.
** ...
- 1
0
votes
2
answers
74
views
Trouble getting a candlestick graph to plot
The relevant parts of package.json are:
"@angular/core": "^18.0.3",
"chart.js": "^4.4.3",
"chartjs-chart-financial": "^0.2.1",
...
- 893
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
0
votes
1
answer
33
views
Show only the first 2 bars on the Y-Axis using Chart.js? [closed]
I have a bar graph which needs to display a set of values like
Total Likes (likes on Facebook+Twitter+LinkenIn...)
Total Comments(comments on Facebook+Twitter+LinkenIn...)
My dataset currently holds ...
- 107
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
164
views
Chartjs afterDraw not showing the line
I am trying to make a chartjs bar chart using dates.
Those are the options i am using to set my chart as i want but i want to add a line at the current date. Here's how i approached it:
public ...
- 71
0
votes
1
answer
107
views
The 'cutout' in chart options not possible with 'plugins'
My chart object is defined like this:
this.chart = new Chart("myChart", {
type: 'doughnut',
data: {
datasets: [
{
label: labeldata,
...
- 19
1
vote
1
answer
127
views
How to add margin top for legend in Chartjs (PrimeNG)
My legend is at the bottom of the chart but the space between the chart and the legend is too small,
How can i add margin or padding for the legend, chart ?
Here is my pie chart options, i have added ...
- 31
1
vote
1
answer
119
views
Event on clicking on labels of Doughnut chart in Primeng (Angular)
Need a method handler details, how to achieve the functionality. I tried (onDataSelect) method handler, it is not throwing an event on clicking on labels.
If options can achieve the functionality, ...
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
0
votes
1
answer
45
views
Chartjs Background Color Settings
I have a chartjs line graph in an angular application and I need the line chart to shade the background red for the negative numbers
The problem I am having is I can't figure out how to calculate the ...
- 354
0
votes
0
answers
26
views
Update image yAxis chart.js
I have some images displayed on my yAxis, but when I sort my data the images dont get sorted.
here is my custom plugin for the images
const flagImagePlugin = {
id: 'flagImagePlugin',
...
- 1,438
1
vote
0
answers
42
views
ChartJS multiple doughnut chart issue when data is low
I am trying to create multiple doughnut chart using chartJS. Issue is when there is single element and data is low, graph looks weird as per attached image
but when there is high data (>50) chart ...
- 3,707
0
votes
0
answers
80
views
Chart.js. How to combine Line chart with stacked Bar chart?
I am trying to create combined line + stacked bar chart, but I can't figure out how do this. There are two charts in the example. Chart1 is stacked bar chart, Chart2 is Line chart, basically I need ...
1
vote
0
answers
31
views
Is sailing performance polar possible with polar chart type
I’m wondering if it would be possible to achieve similar results with the polar chart or another chart type.
[https://48north.com/wp-content/uploads/2022/05/Farr-40-from-Farr-copy.png](Polar chart ...
- 11
1
vote
1
answer
145
views
Scatter chart padding increases when there is data
I am working on multiple charts (scatter chart and bar chart) and I want to combine them to look like 1, but I am having some problems with scatter chart padding for x axis when dataset is not empty.
...
- 13
1
vote
1
answer
113
views
How do you access your chartjs chart in angular
So I want to apply things like chart.update() and chart.clear() but not sure how to do this with angular? What is my html template and ts file meant to look like to be able to access these chartjs ...
- 13
1
vote
1
answer
760
views
How to put dates in charjs angular 17?
I am pretty new to angular, I have this code on my component:
import { Component, inject, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import Chart from 'chart.js/auto'...
- 85
1
vote
1
answer
167
views
Building an Angular library containing a provider for chart.js with plugins?
I'm attempting to build a Angular standalone library for chart.js that will include plugins.
It seems like chart.js modifies the ChartConfiguration type when plugins are registered in order to allow ...
- 46.3k
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 ...
0
votes
1
answer
122
views
Using the Chart.js Gradient Plugin in Angular and typing the chartjs options?
This pure typescript configures a typed chart.js object instance that uses the gradient plugin and Typescript does not produce any linting errors.
https://stackblitz.com/edit/typescript-9xhkzc?file=...
- 46.3k
0
votes
0
answers
50
views
Always show nearest tooltip
In a ChartJS line chart I always want to show a tooltip of the nearest point in the data - no matter what y-coord the mouse in the chart has.
I can partially achieve this by increasing the ...
- 4,718
1
vote
0
answers
309
views
create gauge chart using chart.js and angular in an ionic app
I am using ionic with angular and trying to add a gauge chart in my app. I already have standard other charts such as bar chart etc.
I came across this
https://github.com/haiiaaa/chartjs-gauge and ...
- 1,294
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&...
1
vote
0
answers
54
views
Position y tick lines at both sides of the border
I try to make a chart using chart.js. It should look like following (tick line at both side of border): .
All I achieved so far:
How can I draw tick line at both sides of a border? Or there is other ...
- 753
0
votes
0
answers
50
views
How to do lazy loading for a trend chart of an angular application
Introduction:
I'm working on an Angular application that displays time series data (x axis has timestamps) in a trend chart. The dataset contains a month's worth of data, causing performance issues ...
- 134
1
vote
0
answers
48
views
Chart JS multi axes | Line chart + Bar Chart | Dots are appearing in middle instead of Aligning with chart
I am working with chartjs Version (4.4.0).
I am looking to plot combo chart (Two bar charts and Two line charts).
Where 1 line and bar chart belong to current year data and other belong to previous ...
0
votes
0
answers
41
views
Chart.js: Runtime errors when setting legend position to "left" or "right"
Chart.js throws runtime errors for the chart options is null whenever I change the legend position from "top" to "left" or "right". I am using the latest version, v4.4.0, ...
- 5,434
1
vote
0
answers
162
views
chart.js and chartTrendLine in angular application not compiling
I am trying to implement a plugin called chartjs-plugin-TrendLine
into chart.js in my angular application.
The plugin is located here:
https://www.npmjs.com/package/chartjs-plugin-trendline/v/0.1.1
It ...
- 663
0
votes
1
answer
35
views
How to set legend chart.js text is getting cut
How remove space from left and right side of bar so legend get displayed with complete text
- 121
0
votes
1
answer
526
views
Chartjs Zoom Plugin - Default scroll behaviour not working
In my project, I have implemented a bar chart using Chart.js. The chart allows users to scroll to view the amounts for the previous months over the last two years. To enable panning on the x-axis and ...
- 15.4k
2
votes
1
answer
384
views
Canvas is already in use even after using destroy() when leave the page and comeback to add data
I am getting the error Canvas is already in use. Chart with ID ' ' must be destroyed before the canvas with ID 'MyChart' can be reused. The error appears 4/5 times for each particular id in the ...
- 213
0
votes
0
answers
49
views
Chart.js display date from firestore using Angular error Cannot read properties of null (reading 'toDate')
The user adds date from mat datepicker and stores in firestore (e.g 15 October 2023 of type timestamp) . This is suppose to display in x-axis of chart in the format 15/10/2023. I have used
...
- 213
0
votes
0
answers
92
views
ChartJS radar chart start from 0 Angular cli
I'm using chartJS in Angular.
My problem is that when all data is set to 0, the chart reach the 2nd tick instead of being just a dot in the center:
When I have other data and only some are 0 then it ...
- 325
1
vote
1
answer
1k
views
Export chart.js as image
My chart generation function looks like this:
createChart(db_data: string[], count: number[]) {
const chartOptions = {
type: 'horizontalBar',
data: {
labels: db_data,
...
0
votes
0
answers
78
views
Change horizontal line length - Annotation Chart js in Angular
I'm trying to add horizontal line as target for each bar in bar chart using chart.js in angular.
My Code here,
this.chart = new Chart("canvas", {
type: "bar",
data: {
...
- 159
0
votes
0
answers
105
views
chart.js legend strikethrough not working
I am currently working with Chart.js to create a Doughnut chart. My goal is to update a variable's value when a legend item is clicked. While I have successfully implemented the functionality to show/...
- 1,520
-1
votes
1
answer
282
views
angular chart not populating with data from API response
i'm facing a challenge ploting ChartJs bar chart in my angular app with the data coming from my api response
this is the code snippets
<div class="canvas">
<canvas id="...
- 79
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
0
votes
1
answer
157
views
Failed to create chart: can't acquire context from the given item Angular
I am using Chart.js in Angular 15 , the console displays the following. 2 errors -
vendor.js:209527 Failed to create chart: can't acquire context from the given item .
Canvas is already in use. Chart ...
- 213