Questions tagged [chart.js]
Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.
12,286
questions
0
votes
1
answer
25
views
How to create such a diagram in Chart.js?
I am trying to create this diagram with Chart.js.
Challenges:
As you see on the x-axis are categories. I want the point to be placed in the middle.
I want the value to be on top of the point.
My ...
- 596
0
votes
1
answer
18
views
BarChartModel how to adjust only the width of the bars without changing the entire chart
I'm having trouble changing just the width of the bars. Right now, the chart is working fine, but I need to adjust only the width of the bars without changing the entire chart. How can I do that?
...
0
votes
0
answers
30
views
ChartJS changing border of one element in a horizontal stacked bar chart [closed]
This is for version 4 of ChartJS. I have a scenario where I want to allow users to click on one element in a horizontal stacked bar chart and have that element's border be changed such that the user ...
- 73
0
votes
1
answer
36
views
How to use chartjs-plugin-zoom in laravel
I am trying to use the functionality of chartjs-plugin-zoom in my laravel application but I cant't get it to work.
In the blade I am loading the plugin through Cloudflare cdnjs:
<script src="...
- 35
0
votes
0
answers
21
views
ChartJS remove the empty space around the chart [closed]
I am trying to remove this empty white space of the chart so the trendline on the top left corner doesn't look like this and ends where the last y-axis is.
It looks like this atm:
I thought this was ...
- 53
0
votes
1
answer
10
views
How to extract a Chart.js chart with reactive attributes as a separate component in Svelte?
I have created a Skeleton Project using the npm create svelte@latest myapp command. Next, I installed the Chart.js with npm install svelte-chartjs chart.js and created a simple bar chart:
<script&...
- 887
1
vote
1
answer
28
views
How to update a chart with data coming from an API endpoint in Svelte?
I am using the Svelte JS web framework with the Chart.js charting library to plot a bar chart. I have created a Skeleton project and installed the svelte-chartjs and the chart.js packages:
npm install ...
- 887
0
votes
0
answers
33
views
Chart.js - overlapping percentages are sitting in the middle of pie/doughnut graphs and not sure where its coming from
Rendered Image
Everything is working fine and looks good. Only issue is the percentages are showing right in the middle overlapping in the same place whether it being a pie or doughnut chart.
import ...
- 1
0
votes
0
answers
42
views
Chart JS, strike through external legend when data disabled
For my Chart JS use, I use an external legend via a callback, because some data sets have a lot of labels.
Example of how the external legend is rendered:
options: {
legend:...
- 1,999
1
vote
0
answers
61
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
2
votes
1
answer
64
views
Chartjs 4 - Fill area between stacked line and bar chart
I'm in the process of migrating over to chart.js 4.4.1 and in the prior version (2.9.4) I was able to fill the gap with a color as in the attached image.
2.9.4 sample img
In the newest version, I'm ...
- 23
1
vote
1
answer
83
views
Chart JS chartjs-plugin-datalabels get dataset label and display it
I am currently trying out chartjs-plugin-datalabels, and I'm trying to set a label on my line chart to a specific date on the bottom axis.
The example shows how to set the labels for every 2 points, ...
- 1,999
1
vote
0
answers
24
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,153
0
votes
0
answers
33
views
Chart JS add annotations on line chart to specific labels
I'm looking for something similar to https://www.chartjs.org/chartjs-plugin-annotation/latest/
But the problem is, that requires you to add the annotations position manually, there seems to be no way ...
- 1,999
0
votes
0
answers
30
views
The' goes The warning: Can not find Chart Object. when using 'chart-chartplacelabel.js' library in React app
i already use 'react chart js' for my charts and i would show labels on pie chart, then use 'chart-placelabel.js' library. BUT the library doesn't work and showed this warning in console: Can not ...
-1
votes
0
answers
43
views
Chart JS performance with large of label ( > 100k point ) [closed]
I have a chartJS as label`s quantity is bigger than 100k points, then the Chart is so lag. How could we optimize to fix this problem? ( Without resize of data from label - Just only config options or ...
0
votes
0
answers
42
views
Issue with Expense Tracker Chart in React
Description:
I'm working on an expense tracker using the MERN stack, and I'm encountering issues with the chart on the main home page. The problems include:
Multiple Inputs: The chart is not handling ...
-1
votes
0
answers
27
views
Is there any specific plugin or functionality in chart JS which supports 1m, 2m, 3m, 1YTD zooming in line chart [closed]
I want to implement zooming features on my project, like buttons 1m, 2m, 3m, 1YTD in my line chart when the user clicks the 1m it should filter and displays the 1month ranges of datas. Is there any ...
2
votes
1
answer
46
views
Is there a way to change the font of major ticks in Chart.js 3.x.x?
I have seen some older questions (such as this one) that show how to modify major tick font style in Chart.js 2.x.x with the options.scales.xAxes.ticks.major.fontStyle property. However, fontStyle ...
- 113
0
votes
0
answers
35
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 ...
- 43.6k
0
votes
1
answer
41
views
How to split a charts in react-charts-js-2 into two sets of datasets
I was able to generate that split before a while back and I can't remember how I did it (hehe) I know how to plot the data for two sets of databases, but I am looking to split them visually so that ...
- 10.2k
1
vote
1
answer
74
views
How to set the background color of chart js in node js
Cant able to set background color for the chart js
Im creating an application where i will share chart to slack, im creating the chart in backend using node canvas and chart js , im generating the ...
- 35
0
votes
1
answer
60
views
How to set filter date on the chart.js with useState?
I want to set filter date on my chart and introduce the date buttons by a component named <ButtonDate />. I've decided that it's better to use useState to set change on the button and chart. I ...
- 1
0
votes
0
answers
36
views
Dropdown & checkbox filters are not populating from dynamically generated html table sourced from local MySQL database
[Screenshot of webpage is attached]
I cant figure out why the dropdown or checkbox filters are not populating from my html table for the chart I'm using.
I'm using bootstrap & vanilla javascript ...
1
vote
1
answer
49
views
How to make scales on axises in chartjs equal?
I want to make each axis on my scatter plot increment by the same value, start with the same value, and end with the same value. This is my code right now:
const resultcfg = {
type: "...
- 13
0
votes
0
answers
23
views
Disable plugin in react-chartjs2?
I'm trying to dynamically enable and disable plugins rendered a react-chartjs-2 component.
The plugins that should be rendered are passed to the component like this:
import { useRef, useEffect } from '...
- 53
0
votes
0
answers
49
views
My chart keeps resizing when I redraw it. How do I stop this from happening?
Note: This is using the chart.js library inside a Django template
I am creating a doughnut graph (see image 0) with some data. Then, I destroy the instance of that chart and redraw it (see image 1). ...
- 1
0
votes
0
answers
33
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 ...
- 159
0
votes
1
answer
40
views
How to group data by title in Pie Chart (Chart.js)
for example I have data
{
'category': 'winter',
'amount': 10
},
{
'category': 'winter',
'amount': 10
},
{
'category': 'summer',
'amount': 10
},
{
'category': 'spring',
'amount: ...
0
votes
0
answers
21
views
Scatter plot with a range
I have time series data, with percentile ranges.
So for each timestamp, i can have multiple intervals
eg. 20% to 21.1%, 42% to 48%,
I'm looking for a x-axis time series with y-axis to shade percentile ...
- 1
0
votes
1
answer
57
views
How to use chartjs-gauge with vue-chartjs?
I am using vue-chartjs in my Vue2 application.
https://vue-chartjs.org/
I want to create a gauge chart and tried using chartjs-gauge library.
https://www.npmjs.com/package/chartjs-gauge
But I can't ...
- 555
0
votes
0
answers
22
views
Chart js Cannot read properties of null (reading 'getContext') while I destroy on progress
I am using vue 3.0 and chart.js
I am using a lot of bar, line charts and have to change their labels, data shortly with button.
so I am using API(destroy) such as:
<div ref="...
- 1
0
votes
1
answer
17
views
React Chart.js plugin renders stale data
I am rendering a series of Doughtnut charts with center text rendered via plugin.
While initial render is working as expected, when I implement a client side search and hence re-render the series of ...
- 1,260
2
votes
1
answer
44
views
Chartjs multiple bar using dynamic and variable JSON
I'm trying to create a bar graph based on json data that vary dynamically according to the filter.
I want the graph to show the TYPE related to the PERIOD, when it exists. If it doesn't don't show ...
- 23
0
votes
0
answers
22
views
I would like to add a y counter label to my chartjs line v4.4.0 graph so that i dont have to hover over to view the count
I would like to add a y counter label to my chart.js line v4.4.0 graph so that I don't have to hover over to view the count. The below code is currently what I have:
<canvas class="canvas&...
0
votes
1
answer
48
views
Localize chart.js
(I don't want to use node, and npm)
I want to download chart.js on my own machine, so I can run it offline. I downloaded the cdn from here. I import it like this, in html:
<script type="...
0
votes
0
answers
34
views
How can I get Segment(line that connects two points) information in chartJS when hovering it?
I need to get information about segment (ctx) in a line chart when hovering it and not the points in the dataset. The problem lies in the fact that chartJS does not provide a hover function for ...
3
votes
2
answers
72
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 ...
- 43.6k
1
vote
1
answer
52
views
Problem with chartjs and react-chartjs-2 in reactjs
I tried to draw a line chart with temperature data, humidity data and brightness data. I tried to downgrade the version of chartjs and react-chartjs-2 but it doesn't work
type here Here's my ...
- 21
1
vote
1
answer
54
views
Using Hammer + chart + chart plugin zoom not work in mobile
I am encountering an issue with the drag functionality on mobile devices in a Chart.js chart that utilizes the chartjs-plugin-zoom and hammer.js. The chart works as expected on desktop browsers, but ...
0
votes
1
answer
31
views
Charts js error: unable to map something in datasets
I'm getting an error message when using Chart JS with React that says it's not able to map something in my datasets. Everything looks fine in console log but I can't seem to figure out what's going ...
- 55
1
vote
0
answers
32
views
Apexcharts show all tooltip when page loads without hover
I copied samples from Apexcharts demo javascript and I want to show all the tooltips right after page loads.
var options = {
series: [{
name: "sales",
data: [{
x: '...
- 33
1
vote
0
answers
34
views
Chart.js labels on chart line
I am trying to implement charts to my web project, but having trouble to display labels with corresponding value over Chart Line ticks. I tried looking over documentation to implement it, but without ...
- 11
0
votes
0
answers
89
views
Chart.JS Styling Legend
i'm trying to write untitled ui's line chart on vue.js and i couldn't reach this legend styling no matter what i try:
and i reached this:
here is the related code below:
//
plugins: [
...
0
votes
0
answers
57
views
How to dynamic chart js with laravel inertia and vue js
I want to make this chart dynamic using Laravel and Vue.js. I want to display the data from a table based on the month and income type. I want the payments to be displayed based on the month and ...
- 29
0
votes
1
answer
48
views
How to access the value of the Current point in a progressive line chart in Chart JS using Javascript
I want to access the current point in a progressive line chart in Chart JS using javascript, e.g log the current value of the line on the console every one second where the total duration of the ...
1
vote
1
answer
33
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
1
answer
25
views
Pie Chart is not populating in ASP.NET MVC page
I am having trouble populating my pie chart using Chart.js. The chart legend comes up but the values are undefined.
cshtml
@page
@model FinalProject.Pages.Exam.ReportModel
@{
Layout = null;
}
<...
- 33
1
vote
1
answer
37
views
Chart.js Hover Lines Not Disappearing on Mouse Leave
I have a chart that I have created using the react-chartjs-2 library. I have created a custom plugin to draw vertical and horizontal hover lines. The hover lines appear correctly when hovering over ...
- 469
0
votes
0
answers
95
views
Chart.js update() fails to update the chart if data decimation has been applied
I have a few temperature sensors that upload per-minute readings to a mySQL database, and a simple web interface that uses Chart.js to display ranges of data.
Because I ran into performance issues ...
- 113