All Questions
Tagged with chart.js typescript
480
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
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
0
votes
0
answers
28
views
Chart.Js Chart's layout is not updated in storybook
my goal
I'm trying to make Chart preview with using StroyBook and Chart.Js.
what I Did
make Chart Component with using Chart.Js
make Story Component with using Chart Component
versions
"chart....
- 21
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....
0
votes
0
answers
89
views
chartjs-chart-financial in next.js is not showing
I am working on a simple Chart dashboard app in Next.js, using Chart.js. I am trying to add a Candlestick chart component, for which I use the chartjs-chart-financial library. However I only get an ...
- 21
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
0
answers
64
views
Error message in console while using Chart.js with NextJS: Canvas is already in use
I am trying to display some basic data within chartjs and nextjs. below there is the main code and some key notes to consider
Main code having the problem
import Chart from "chart.js/auto";
...
- 1
0
votes
1
answer
70
views
ChartJS: Property 'fit' does not exist on type 'LegendElement<"bar">'
Quick question:
I'm using ChartJS with react-chart-js2 and typescript.
I wanted to increase padding between legend and chart, and got to a solution that works, but I can't seem to get the types right.
...
- 313
0
votes
1
answer
136
views
"cannot find name Chart" when trying to use chart.js
I have a really annoying problem with chart js which I am stuck for some days now, I've tried literally everything but couldn't figure out yet.
The problem is, I'm using a simple TypeScript ...
2
votes
1
answer
95
views
How do I make the line start at the middle instead of the beginning of the column?
I'm creating a line chart using chartjs (v3) (and react-chartjs to integrate) and I'm having some bad times to customize the line to start at the middle of the first column (and also finishes at the ...
- 67
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
0
votes
1
answer
37
views
Custom tooltip doesn't show for horizontal bars which cover 100% of the horizontal length of the entire chart (react chart js)
I am using v4 of react chart js. The chart type is horizontal bar and I am using a custom tooltip to generate the tooltip but the tooltip is not displaying for bars which have 100% bar length.
...
- 13
0
votes
1
answer
188
views
How to use Ticks formatter with Typescript in Chart.js?
If I make Chart.js to use locale en-US, I get the scale numbers formatted optimally.
If I use tick callback like in the documents:
ticks: {
callback: function(value) {
return value....
- 422
2
votes
1
answer
68
views
ChartJS: Grouped Stacked Bar Chart rendering incorrectly
I am trying to use ChartJS to create a grouped stacked bar chart. In my dataset, there are 2 groups: Groups A and Groups B. Groups A are rendered out correctly, but for some reason, Groups B (gray ...
- 6,455
0
votes
0
answers
38
views
Unable to see center text and subtext in Chart.js doughnut chart
I am using Chart.js for a doughnut chart in a React application. I have used this component twice, but I am unable to see the center text and subtext. I am also having trouble registering the plugin.
...
- 15
1
vote
1
answer
45
views
To configure Chart.js to display hours on the x-axis ticks when rendering charts in a Node.js
i am generating chart image in node using chart js how can i use hours on the ticks is there any idea for that
Error: This method is not implemented: Check that a complete date adapter is provided.
...
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
1
answer
43
views
Chartjs: How can stack the label of a different dataset on top of each bar in my bar chart?
chart.js 4.4.2
chartjs-plugin-datalabels
this is the effect id like to achieve
const chartCtr = document.querySelector('#temp-chart1') as HTMLCanvasElement;
new Chart(chartCtr, {
type: 'line',
...
- 93
0
votes
1
answer
160
views
Chart.JS - Configure x axis to show the hours of the full date in data.labels but it still shows the original labels below
chart.js: 4.4.2
date-fns: 2.30
chartjs-adapter-date-fns: 3.0.0
I wanted to truncate the x-axis as the dates were labeled in "YYYY:MM:DD HH:MM:SS" format. I achieved that via options.scales....
- 93
1
vote
1
answer
345
views
How do I get dataset object from chart object in chart.js typescript?
I am trying to create new custom plugin for chart.js and having issues with type error while getting dataset option from chart object.
This is plugin code.
const gaugeNeedle: Plugin<"doughnut&...
- 33
0
votes
0
answers
24
views
Only showing the Pie Element when rendering variable width chart.js Pie Chart Elements?
In this demo the pie chart elements have a variable border width (borderWidth: [30, 1]), and this causes chart.js to render a white circular background for the elements. Is there a way to hide the ...
- 46.3k
1
vote
1
answer
46
views
Making one of the slices in a chart.js pie chart thicker?
Is it possible to make a slice of a chart.js doughnut chart thicker than the rest of the slices?
For example in this Stackblitz demo is it possible to make the blue slice 25% thicker than the purple ...
- 46.3k
0
votes
0
answers
35
views
Get chart.js to display a tooltip any time the cursor intersects the line? [duplicate]
In this demo I'm trying to get chart.js to display a tooltip at the place where the cursor intersect the line.
This question is similar and I tried the options pointed out, however no love.
options: ...
- 46.3k
0
votes
0
answers
38
views
chart.js Dynamically align grid lines with multiple y-axis
When I generate a chart with multiple y-axis the grid lines on the y-axis don't align, because the tick count on the left is higher than on the right.
What I want to achieve:
However I had to ...
- 633
1
vote
0
answers
71
views
Is it possible to reexport typescript types modified through declaration merging?
In this question I'm trying to create an Angular library that registers some plugins in chart.js.
import gradient from 'chartjs-plugin-gradient';
Chart.register(...registerables);
Chart.register(...
- 46.3k
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
0
votes
0
answers
39
views
Chartjs v3 no title text gets displayed
I am using chartjs-node-canvas together with chart.js v3.9.1 to generate a chart. At first, my chart had a title text displayed but after I was done modifying the options the title will not be ...
- 647
0
votes
1
answer
60
views
Is there a boolean option to turn off point display for line charts in chart.js?
In chart.js is there an boolean option to turn off the point rendering in line charts?
Looking through the documentation there's an option for pointRadius and if we set that to zero, then the point ...
- 46.3k
0
votes
1
answer
66
views
Increasing the space between grid lines in chart.js?
This demo draws grid lines:
https://stackblitz.com/edit/typescript-sfxm8f?file=index.ts
How do we space the grid lines and tick labels such that a grid line is only shown for y labels [4,8,12,16,20]?
- 46.3k
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
1
vote
1
answer
150
views
chart.js - Chart__default.default is not a constructor when used in package
I am creating a package which includes a react chart component using chart.js
When the package is run in debug in storybook it works fine.
However when package is bundled using rollup, referenced in ...
- 5,496
0
votes
0
answers
121
views
Chart.js not linking in TypeScript dynamic web app
I am building a dynamic web app in eclipse 2023-6 in (almost) 100 % typescript, no JS platforms like Angular/React etc. Server is tomcat 9.0, with java servlet. Server side and TS work fine until I ...
- 57
0
votes
0
answers
40
views
Does ChartJS have an API method for updating the chart instance with a single configuration object?
With ChartJS we can create a chart instance like this:
const chart = new Chart(ctx, config);
If we update the config object does ChartJS have a method for performing the update by just passing in the ...
- 46.3k
0
votes
0
answers
61
views
Resolving lint errors when registering the ChartJS gradient plugin?
Attempting to import and register the chart.js gradient plugin in this demo and it produces the below Typescript linting error when declaring the plugin this.
plugins: {
gradient,
},
This is ...
- 46.3k
0
votes
0
answers
90
views
White screen in electron when using react-chartjs-2
I have this typical chart implementation of react-chartjs-2. Why is this not working in electron generated using Vite and with react with TypeScript (.tsx) as the front-end? The problem: I can't see ...
- 167
3
votes
2
answers
176
views
Obtaining the coordinate of a null value when using spanGaps with ChartJS?
I'm wondering if ChartJS exposes an API for plugins that allows us to obtain the coordinate of a null point that has been "Spanned" by ChartJS?
For example as illustrated in this question ...
- 46.3k
0
votes
0
answers
31
views
What to use in place of datasetStrokeWidth for the lastest chart.js?
This demo is attempting to convert this demo to the latest version of chart.js.
What should we use in place of datasetStrokeWidth? It controls the width of the line.
options: {
responsive: true,...
- 46.3k
1
vote
1
answer
95
views
Implementing a gradient background in in the latest chart.js?
This question has an implementation and I'm trying to transfer it to this demo using the latest version of chart.js, however the gradient settings are not taking effect.
Any ideas?
This is the entire ...
- 46.3k
0
votes
1
answer
312
views
Types for ChartJS Options?
Does anyone know if there is an updated set of types for ChartJS?
There is a package @types/chartjs, but it's deprecated.
It would be nice to get autocomplete when defining options.
Currently with ...
- 46.3k
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
1
answer
250
views
Chartjs: How to apply updated default options after chart is created?
I have a dark mode toggle button, and I want Chart.js to respond to the light/dark mode. So I set up two sets of default options:
const defaults = {
scale: {
border: {
color: dark ? '#...
- 11
1
vote
1
answer
413
views
How to sort datasets for each stacked bar chart using React Chart.js 2
I am currently unable to sort the datasets that shown in each stacked bars in descending order; they are currently displaying randomly.
Here is my current code
import React from 'react';
import {
...
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
1
vote
0
answers
32
views
Chart js stacking issue
I have created a Chart, there wasn't problem, but recently I needed to make 3 bars, stacking by x and y axis. But it was impossible to make it as I want, so I created new issue in github.
github issue ...
- 51
1
vote
1
answer
110
views
get Coordinates of labels in radar chart js in order to replace labels with images
I have radar chart js and I want replace labels with images
I tried to add images on dataset but I couldn't add them on labels [1, 2, 3, 4 ,5]
radar chartjs
how can i put the images on the labels ?
...
- 13
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
1
vote
1
answer
218
views
How to remove point labels in react-chartjs-2 Line component?
I am working with the Line component from react-chartjs-2 and having trouble with removing labels on the points of the line.
Line Graph Result
Line Options:
const chartOptions: DeepPartial<
...
- 21
2
votes
0
answers
141
views
getting typescript annotations error when adding annotations in react for chartjs [closed]
I am able to see the annotations on the graph. but typescript is throwing below error
Type '{ plugins: { annotation?: { annotations: { annotation: { type: string; scaleID: string; borderWidth: number; ...
- 923
0
votes
0
answers
667
views
PrimeNG (chart.js) chart legend to display title and legend in a SINGLE line on top
I have a chart.js based primeNG donut chart derivative and I am trying to display legend better.
What I want is the legend title is in the top left corner and rest of the legend in the top right ...
- 1,873