Questions tagged [chart.js]

Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.

Filter by
Sorted by
Tagged with
-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:...
Rikard Svenningsen's user avatar
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 ...
jakeMantle's user avatar
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 ...
ivanbosk's user avatar
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 ...
Tom Gob's user avatar
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 ...
Ant Ax's user avatar
  • 1
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 ...
Pinkslushie's user avatar
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 ...
hussain ashraf's user avatar
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,...
Ole's user avatar
  • 43.3k
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 ...
Aimal's user avatar
  • 97
-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 ...
chandran kannan's user avatar
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: [ "...
Михаил Погосян's user avatar
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 ...
Ole's user avatar
  • 43.3k
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 ...
Serhii's user avatar
  • 733
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 ...
Ole's user avatar
  • 43.3k
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 ...
Simon Schriefer's user avatar
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-...
FeelRightz's user avatar
  • 2,849
-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
thinhnk's user avatar
  • 341
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 ...
petramb's user avatar
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 ...
PhDoanh's user avatar
  • 23
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 ...
Lisa's user avatar
  • 41
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 ...
Denzel Omachonu's user avatar
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: { ...
Ole's user avatar
  • 43.3k
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 ...
snappymcsnap's user avatar
  • 2,083
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", "...
Ngoc Nghia's user avatar
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 ...
djlj's user avatar
  • 41
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. ...
Oscar Diez's user avatar
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 ...
LOTUSMS's user avatar
  • 10.2k
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 ...
Aishwarya's user avatar
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-...
Dylan Pageot's user avatar
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 ...
Golem's user avatar
  • 112
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 ...
HaoSed's user avatar
  • 9
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 ...
chen liang's user avatar
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, ...
Gnanavel's user avatar
  • 767
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 ...
Aishwarya's user avatar
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: { ...
Holeng's user avatar
  • 27
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 ...
npa02012's user avatar
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 ? '#...
Wai Luk's user avatar
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 { ...
ahmad kharabsheh's user avatar
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 ...
xyz.sml's user avatar
  • 25
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 ...
Timino's user avatar
  • 1
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 ...
Overdrivr's user avatar
  • 6,348
-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?
Nerdy's user avatar
  • 9
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 ...
octaneal's user avatar
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 ...
nneekkiitt's user avatar
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 ...
Lion Lavrov's user avatar
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 ...
Nicos's user avatar
  • 1
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 ...
Hearthing's user avatar
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 { ...
Myo Thiha Kyaw's user avatar
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 ...
Aishwarya's user avatar
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 ...
mmd's user avatar
  • 79

1
2 3 4 5
246