Questions tagged [chart.js]
Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.
12,267
questions
-1
votes
0
answers
16
views
php json data to use in chart.js [duplicate]
I have trouble with understanding how to get this data into this format:
Need format:
const xValues = ["07:00:00","07:10:00","07:20:00","07:30:00", "07:40:...
0
votes
1
answer
11
views
How to make chartjs Tooltip scrollable?
I tried creating custom tooltip. The below code provides a tooltip with scrollbar, but unable to scroll through the tooltip. Not sure what I missed.
There is a callback function which provided a list ...
0
votes
0
answers
13
views
JavaScript live graph axis labels not displaying as they should
I am attempting to create a live chart in JavaScript. I gathered data from a webpage using web scraping. The scraped data, along with the respective timestamps is stored in a CSV file. I wrote ...
0
votes
0
answers
21
views
How can I fix the formatting on these graphs?
I am using the chart.js library to generate these graphs. I cannot get the title of the doughnut chart to stack over the actual chart or the legend of the doughnut chart to be lowered a little, and ...
0
votes
0
answers
26
views
Is there a name for this type of graph and can this be created using a chart engine?
I saw this kind of graphs a few decades ago being used in an automotive industry book written in the 1980s and been more or less fascinated by them ever since, wondering how to create similar ...
0
votes
1
answer
54
views
Is there a way to combine multiple graphs into one singular graph?
I'm not sure how do I search for this because I really have no idea how to type it out so I apologize in advance if there is already an existing solution out there.
My problem:
Let's say I have ...
0
votes
1
answer
38
views
Pie chart not rendering in React using Chart
I am facing an issue with rendering a pie chart in a React component using the react-chartjs-2 library along with Chart.js. The data for the chart is fetched from an API, and the chart is expected to ...
0
votes
0
answers
24
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,...
0
votes
1
answer
56
views
Only show plotted points x-axis labels in line chartjs
I want the following chart to show the x-axis labels for the 3 specified plotted points (365 Days, 730 Days, and 1095 Days) and hide the rest of the labels for the x-axis but the labels should still ...
-1
votes
1
answer
30
views
I want align the legend label in bottom [closed]
am using chartjs2 and created this component using bar chart. I want completed and scheduled labels should be aligned bottom
enter image description here
I want completed and scheduled labels should ...
0
votes
0
answers
29
views
How to add "data-gaps" in CharJs?
I try to create filled line chart from BarChart component. I need to fill gaps in chart.
Here is my chart settings (i`m using vue-chart-3, so, i show just configs):
Chart Data
{
labels: [
"...
0
votes
1
answer
41
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 ...
1
vote
0
answers
25
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 ...
0
votes
1
answer
50
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 ...
0
votes
0
answers
12
views
Changing neutral value from 0 to different number. | reract-chartjs-2
I´m trying to implement a Bar Chart with react-chartjs-2 in a web app.
It is possible to make a graph where values above zero head up and values below zero head down.
So far so good. But now i need to ...
1
vote
1
answer
42
views
React: chartjs nagative area different color
I using chartjs and react-chartjs-2 line chart for positive and negative value, for positive value I want the filled area is green, and negative area is red.
https://codesandbox.io/p/devbox/recursing-...
-5
votes
0
answers
38
views
Any suguestions for stacked circle chart [closed]
i want to render chart like this. enyone can sugguest which plugin can help please?
]1
0
votes
0
answers
45
views
Chart.js display data labels as integers on x axis
I am working on a chart which reads data from a .csv file and displays the emisivities of four surface types against wavelenghts between 3.660 and 14.559. Example of my source dataframe (in total 531 ...
2
votes
1
answer
51
views
Chart.js Problem: Is there any way to convert data from a markdown table into a chart?
I am using Obsidian to take my notes, it is an application that allows writing notes in markdown format and using plugins from the community (like chrome store extensions). So I installed two plugins ...
4
votes
2
answers
88
views
How to handle a big CSV file with HTML, JS and Chart.js
I have to upload a 90 MB CSV file and then analyze it with chart.js as a chart. The CSV file has measured values that are recorded per minute. The 90 MB are then almost a year's worth of data. I have ...
0
votes
1
answer
25
views
I have a problem with a project I am working on involving chart.js
Ok, I wrote a code which would collect user's input and then display it in any chart of their choice but on running the code, it doesn't display any chart after I have inputed my values and clicked ...
2
votes
1
answer
48
views
Calculating point coordinates on a line in chartjs?
In this draggable ChartJS demo is it possible to derive a set of interpolated coordinates along one of the curves that ChartJS plots?
var options = {
type: 'line',
data: {
...
0
votes
0
answers
18
views
Is there a way to do a stacked bar chart in Chart.js with a secondary dataset overlaid?
It is difficult to explain so hopefully the images will clarify my question. I currently have a bar chart to display revenue by month where each dataset is for a different year. The client would like ...
0
votes
0
answers
28
views
How to show all data points on radar chart using Chart.js?
I would like to render a chart like this example using Chart.js
I have a chart config like this
labels: ["Technology", "System", "People", "Process", "...
0
votes
0
answers
53
views
Chart.js - vertical line [closed]
I'm playing with Chart.js and I'm writing something about weather forecast: https://asteroid.vsevjednom.cz/
And I want to show vertical line of actual time (or show old hours in black color). I don't ...
0
votes
0
answers
23
views
Canvas does not render chart correctly
I´m using these libraries:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js
https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels
but when render the labels are cut.
...
1
vote
3
answers
107
views
How to map through an array of charts from charts-js using react
I've used a map function a million times but this is eluding me.
I have an accordion that maps out the chart titles so I can pick what I want - Works
Once I pick a chart, it displays it on the viewer ...
1
vote
0
answers
48
views
How to add space between Legend text and chart in ChartJs v4
I'm using Chart.js version 4.4.1, and I want to increase the space between the legend and the chart.
I need a solution for both bar and donut charts. I'm sharing the code for the bar chart, but my ...
1
vote
0
answers
52
views
Can someone help me about a Chart.js doughnut that doesn't appear?
I've got an issue with a dougnut made with chart.js. It doesn't want to appear, without any error in my console.
Here is my HTML/JS part code :
<div class="min-w-0 px-4 rounded-lg shadow-xs bg-...
0
votes
0
answers
32
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 ...
1
vote
1
answer
44
views
How can I set a photo in the chartjs-plugin-data labels v2.1.0 plugin?
I use the 'chartjs-plugin-data labels v2.1.0' plugin, to create a wheel of luck, you need to replace the text with img in the labels column, how can this be done?
In regular JS, the labels line has ...
1
vote
2
answers
48
views
[ChartJs]How can I modify the height of the chart instead of changing it through canvas
enter image description here
my options like this
datalabels: {
align: "end",
offset: 40,
},
Because I set the offset, the content on it exceeded the canvas and was hidden.
The same problem ...
1
vote
0
answers
40
views
How to extend Chart.js Legend Class?
I want to extend Legend class from src/plugins/plugin.legend.js to add pagination feature to it. I tried making a separate plugin only for adding a pagination button, and when the user clicks on it, ...
0
votes
1
answer
42
views
ChartJS: chartjs-plugin-datalabels not showing value properly
I'm attempting to create a chart using Chart.js and I'm using the 4.4.1 version for creating a horizontal chart.
In my code, the data labels are currently displayed as "x: 222, y: 1" but I ...
0
votes
1
answer
36
views
Chartjs how to disable a scale in stacked line chart
I tried to hide an axis in stacked line chart, it kinda works but the area stays there.
How can I delete that area in the picture and connect the other axises between.
Thanks in advance!
y3: {
...
1
vote
0
answers
51
views
How to stop ChartJS / react-chartjs-2 from re-rendering new lines on plot
In my React App, I am adding new dataset lines to a chart. Here is the behavior I am encountering:
On App start, a chart renders with a single line [desirable]
When I mousedown on the chart, a second ...
0
votes
1
answer
32
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 ? '#...
0
votes
0
answers
34
views
Change shape of labels vue-chartjs
I'm using vue-chartjs to display some charts, the labels show rectangle shape beside them, i want to change that shape from rectangle to circle, how can i do that ?
<script setup>
import {
...
1
vote
2
answers
70
views
Chart.js display data based on selection
I am looking for a solution to display some data based on what you hover on inside the chart. Here's my jsfiddle and a demo of what I want.
gif image
I hope I've made everything clear, and thanks in ...
0
votes
1
answer
27
views
Chart.js totally local mode
I recently discovered the possibility of easily creating charts thanks to the Chart.js library. I have added the necessary elements to my test site to evaluate the library using the online link, and ...
0
votes
1
answer
48
views
How can I draw a dashed line on a scatter plot in ChartJS
With Chartjs, I'd like to draw dashed lines on a scatter plot.
I'm using the scatter plot and not the line plot because I need to display constant-time ticks on my x axis (my data has varying sampling ...
-1
votes
0
answers
22
views
Chart JS saving charts as an image on the server
I'd like to save my Chart.js graphs as an image on my server. Are there any ways to do this, or should I choose another library?
0
votes
1
answer
32
views
ChartJS Change Axis color
I have MultipleLine Chart and I want to color axis, because it's impossible to see them on my background.
How can I change this option?
I tried zeroLineColor, but it looks like it doesn't exist ...
0
votes
0
answers
17
views
Set ticks offset in Chart.js
I need to draw a chart using Chart.js and set minimal and maximal value for X axis (type: linear). But that values can be not "nice" (not a multiple of ten, for example), but I want ticks to ...
0
votes
0
answers
12
views
Doughnut Cannot set properties of undefined (setting '_listened') and TypeError: Cannot read properties of undefined (reading '_labels')
So, as I get main problem is chart try to use labels form undefined object and can't find them - after that it gives error exception.
Also good question why it happens only when I reload the page and ...
0
votes
0
answers
21
views
Chartjs new data
I got the desired result for the new Chartjs data.
I've been at this for a while and finally got it right after some research and advice.
Now I can display my data in real time..
Can you help me ...
0
votes
0
answers
37
views
Chart.js bar graph isn't displaying the correct information
I'm working on a simple budget tracking app and one of my graphs isn't updating correctly. I'm trying to display initial income alongside actual income, which is income - expenses. I must be missing ...
1
vote
1
answer
89
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
70
views
ChartJS Customised tooltip and LegendText not displaying after version update
Earlier i was using 2.7.2 version of ChartJS, now im updating to 4.4.1
So in my chart i was creating customized tooltip and customized Legend text but after version update both are not working
Here is ...
1
vote
1
answer
20
views
React Chart.js providing equal gap for xAxes showing formatted dates
After adding displayFormats in scales.x, now my xAxes labels are having different gaps according to the data object it contains. How do I make my xAxes labels to be shown with equal gaps?
The follow ...