Questions tagged [chart.js]
Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages
10,273
questions
0
votes
0answers
4 views
How to represent state like ON / OFF in chartjs time scale data?
What's the best way to render state data in chartjs against time ?
Background: I have time scale data representing states of a state machine. The states are strings, e.g 'ON', 'OFF', 'FLASHING', etc. ...
0
votes
0answers
13 views
Why my chart is injected with some random padding inside my canvas?
I can't figure out why I'm not able to remove this random padding injected inside my line chart in Chart.js (file attached).
Here is a part of my chart configuration :
myChart.current = new Chart(...
0
votes
0answers
17 views
Add dynamic data in a demo chart.js file of a django template
I'm using the "start bootstrap4" template for my Django project. I want to edit my own data in the sample chart. I need to change it in the chart-pie-demo.js file
I used gspread and pandas ...
0
votes
0answers
16 views
How to show one label per point on stacked horizontal bar chart using Chart.js v3.7?
I have set up a horizontal stacked bar chart using Chart.js 3.7.
The issue I am facing is that when I over over each point it brings up a list of all points within the stack/group. I wish to return ...
0
votes
0answers
18 views
How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
I am drawing polar chart with chart.js ^2.8.0 and ng2-charts ^2.3.0 in Angular. I have used chartjs-plugin-datalabels to display labels but this does not support lables outside at fixed positions ...
0
votes
0answers
46 views
Set Tooltip over line Chartjs
I wanna show tooltips over the line not only on data points.
I also tried the chartjs-plugin-crosshair but it doesn't work in V3 of chartjs.
0
votes
0answers
15 views
Tooltips showing wrong data in ChartJS
I have a bar chart which shows data from an API, after data normalization i'm having issues with tooltip where if i hover a set like '9:00' the tooltip shows '8:00' data by adding to it other data ...
0
votes
0answers
23 views
(chart.js v3.5.1) change bar background, label font color on click
I want to change bar background, label font color and label font weight.
But only the bar background color works.
How can I change font-color and font-weight on click?
Help me please
const ...
-1
votes
0answers
12 views
(chartjs-chart-matrix) cannot read properties of undefined (reading 'prototype') [closed]
I followed https://chartjs-chart-matrix.pages.dev/integration.html#bundlers-webpack-rollup-etc to create the matrix.
I get:
error i'm getting
I'm also using typescript, if that helps
1
vote
1answer
13 views
How to address type errors when removing data with chart.js?
I'm using chart.js to make a simple chart. No problem producing the chart, but now I've added a remove data function per the documentation but I'm getting a type error. I assume it's because I'm ...
0
votes
0answers
9 views
How to set additional text below x-axis in chart js?
I want to set additional text below x-axis title in chart js. I have attached image link for your reference. Thank you.
https://i.stack.imgur.com/dCpXP.png
0
votes
0answers
6 views
chartjs-node-canvas install (build) error
I want to render a chart to use with my discord bot and so far all the tutorials i have seen are using the chartjs-node-canvas module. But it gives errors when installing.
If someone gives me an ...
0
votes
1answer
34 views
Can Chart.js Horizontal bar work with time series data?
I am trying to develop a stacked bar graph based on time series data. The data is representing the running of a machine logged to Influx.
Looking about I have not seen this done and cannot seem to get ...
0
votes
0answers
28 views
How to set up chartjs(react-chartjs-2) time x-axis for multiple datasets
Situation: I get multiple datasets from my server, each dataset is loaded into a state and then split into data with keys and values([{x:'2021-10-25', y:20},...]).
My goal is to display the correct ...
0
votes
2answers
24 views
I have a chart but it is not updating the chart with react chart-js-2
I have a react weather project which is based on API
I have a component called CHART but it is not updating the most important part of the project.
Whenever I type the city name it is getting all the ...
-1
votes
0answers
13 views
How to make Stacked Radar Chart
I'm able to make a radar chart following the documentation at https://www.chartjs.org/docs/latest/charts/radar.html. However, I'd like to make a stacked radar chart and the docs describe it (https://...
0
votes
1answer
17 views
how to make realtime update chart like in package express-status-monitor?
chart looks like below from THIS GIF (image taken from https://github.com/RafalWilinski/express-status-monitor)
Like the gif above in the chart there is a description of the update time. And the data ...
0
votes
0answers
7 views
MVC - How can I use a javascript variable as an index in @Model
How can I pass a variable in a for loop in javascript to the model field?
I need to dynamically create a graph based on the selected sheet. I need to loop these graphs, but I have no idea how I can ...
0
votes
0answers
12 views
how to pause setInterval and resume if there is new data from database?
How to pause setInterval if all data from the database are loaded and resumes if there is new data from the database without manual page refresh? The problem with this if I will not use clearinterval()...
0
votes
1answer
42 views
Is there a better way to create an 'n' number of charts in ChartJS and ASP.NET C#?
EDIT: I have narrowed it down to something like this:
for (i = 0; i < data.length; i++) {
const newCanvas = document.createElement("canvas");
newCanvas.id = data[i]....
0
votes
1answer
15 views
Why itemSort is not triggered when I hover a dataset point in Chart.js?
I can't figure out why my console.log isn't triggered in the Chart.js tooltip itemSort function. Do I miss something ?
plugins: {
legend: {
display: false,
},
tooltip: {
...
0
votes
1answer
27 views
Change color of a single point by clicking on it - Chart.JS
I'm building a scatter chart using Chart.JS(latest version), one of the behaviours I'm trying to implement is clicking on a single point and highlighting it by changing the background color of the ...
1
vote
1answer
36 views
How to create a graph where the vertical axis (Y-axis) is a string?
The graph I want to make is a line graph with strings on the vertical axis and numbers on the horizontal axis by using Chart.js.
For example, the horizontal axis is time and the vertical axis is the ...
0
votes
3answers
59 views
How do you use user input as data values in chart.js?
I'm creating a mood tracker that allows people to input the number of days they feel a certain mood. The HTML form accepts the numbers from 0-7, and accordingly I want the pie chart to dynamically ...
0
votes
1answer
32 views
pass array to chart.js option [closed]
i have this array:
array (
0 => 'rgba(202, 63, 20, 1)',
1 => 'rgba(35, 14, 225, 1)',
2 => 'rgba(73, 128, 13, 1)',
3 => 'rgba(238, 62, 10, 1)',
4 => 'rgba(85, 152, 95, 1)',
5 ...
1
vote
0answers
21 views
How to group data by label and date in ticks of 30 minutes in ChartJS?
I'm trying to show my Data in ChartJS where the data must be shown divided by datasets of time in ticks by 30 minutes where in each dataset i must have different types of labels, the data is showing ...
0
votes
0answers
10 views
ChartJS Plugin not working After migrating from version 2 to 3
Really would love some help with this. Some of my plugins stopped working when I migrated from Chart js 2 to 3. I know that I have to pass in options into this format function(chart, args, options). I ...
-1
votes
0answers
17 views
How to remove the dataset label from the chartjs version 3.7.0
It's my first time working with Chartjs in React.
I want to remove a couple of things from the Line Chart
First one the data set label
Second I want the background color to be in gradient
Third how to ...
0
votes
0answers
12 views
ChartJS show correct values on Gauge
I am using Chartjs with the chartjs-gauge extension to create gauges.
When I have a Gauge that runs from 0 to 90, I can show the labels using the options limits and scaleinterval
This is what is in ...
0
votes
1answer
24 views
Chart.js: hide dataset line but keep ticks on y-axis?
I have the following Line chart with two datasets that share the same x-axis labels. I'd like to know if is it possible to hide one of them but keep the labels (e.g. from 100 to 500) on the right y-...
0
votes
1answer
29 views
How to plot a line chart which has both the start and points outside the canvas area using Chart.js
I am currently using chart.js "2.9.4" and the "react-chartjs-2 "2.11.1".
My goal is to draw a line chart which has only two data points. Both these two data points are outside ...
0
votes
0answers
26 views
React-chartjs-2 linechart is not updating after dataset changes
I have to render a chart js linechart with order data for each month from the json object returned from the API.
Sample JSON Object
[
{
yearCount:2021,
ordersCount:23,
monthCount:10,
...
1
vote
1answer
13 views
ChartJS yAxis showing not coherent data
I'm trying to show some data from my API in a Bar Chart with latests ChartJS.
After initializing my Chart i have a function which get the data from API and set it in the Chart.
The issue is that yAxis ...
0
votes
1answer
21 views
change axis scale to be round numbers instead of decimal - chart.js
I'm working with chart.js and I can't seem to be able to change the scale of the Y axis to show whole numbers, in this example I would like to have just round numbers in the scale (1,2,3,4,5) instad ...
0
votes
0answers
15 views
I'm wondering is there any way i can make a chart to show progress of doing taks with the date time
I'm wondering is there any way i can make a chart like this? :
So what is going on here?
There is some processes related to each other so they have to be connected with a line (red line)
And may they ...
-1
votes
0answers
10 views
Chart.JS Renders differently between plain HTML/JS/CSS to Blazor w/JSRunetime
I am using the same JSON object to create Chart.JS line chart.
When I use HTML/JS/CSS I get what I want.
When I try the same using Blazor with JSRunTime, it looks different and the labels are missing.
...
0
votes
2answers
38 views
Svelte , pass data to chartjs from API
Im new to Svelte , im trying to create chart using API data but have problem pass data to chartjs from API
this is my chart.svelte
<script>
import { onMount } from "svelte";
...
-2
votes
0answers
27 views
Chart doesn't show when click on button
I guys,
I have a graphic and two buttons, it is connected to a DB and aims to change the values when clicking on the buttons.
I click on the first one and it assumes the value, but when I click on ...
-2
votes
0answers
21 views
Draw horizontal lines with labels in charts.js which do not span the full chart [closed]
I am trying to draw the elements in the red square on this chart (without the red square). It's basically two horizontal lines which span over the bars and have a label on them.
Using the chartsjs-...
0
votes
1answer
39 views
How to have custom colors in ng2-charts and chart.js according to data?
I'm looking to build a line graph and mark all points above a certain value as red, and all those below that value as blue. I tried doing so with ngx-chart but that did not work. How do I do so with ...
0
votes
1answer
18 views
How to set min Value a step down of min value received from database in Y Axis in ChartJS
I am displaying a chart showing month on x and amount y from values received from database. Say
X = Jan21, Feb21, March21 and So on.
Y = 1000, 1500, 2000 and So on.
Step automatically coming 500.
Now ...
0
votes
1answer
14 views
Chart.JS add dataset from hidden input
I'm trying to add a dataset which are stored in a hidden input in a form.
Here are the inputs, which are set using ajax , and I extract to create a table but now want to add this dataset to a chart....
0
votes
0answers
11 views
Graph Component not charting data (Chart.js)
I am trying to implement a slider using graph.js one of my pages have two different bar graphs used sideways to look like sliders (readonly) with buttons. However the 2nd bar graph isn't charting the ...
0
votes
0answers
20 views
How can I destroy the chart in this script?
I cannot figure out how I can destroy my chart if it exists before re-rendering it? (e.g. after changing dates)
Here is my Vue component:
<script>
import { defineComponent } from "vue";...
-2
votes
0answers
10 views
ChartJs add vertical lines at december points
When I make a Chartjs table the background is a plain square pattern. What I would like is to be able to mark the transition from one year to the next with a bolder vertical line at every new year.
In ...
1
vote
1answer
24 views
Chartjs stacked bar separate tooltip for all stacked
I want to make a separate tooltip for every stacked bar, Ex. My demo "2022-01-17" has TWO stacked bars with FOUR values but I need a total of Stack 1 group and Stack 2 group
I've reviewed ...
-1
votes
0answers
24 views
chart.js is not rendering after updating to 3.x version on wix velo
I am using this example of using chart.js npm with Wix Velo. When updating chart.js from 2.9.3 version to 3.x the custom element (the chart.js chart) is not rendering.
Any suggestions?
Thanks
0
votes
0answers
28 views
Show percentage in tooltip instead of number in primeng chart
I am using primeng chart to display a pie chart in my project. I'm able to render the chart but currently the tooltip shows the actual number of the data that the pie represents. I want to show the ...
0
votes
0answers
20 views
Chartjs year markings
When I make a Chartjs table the background is a plain square pattern. What I would like is to be able to mark the transition from one year to the next with a bolder vertical line at every new year.
In ...
1
vote
1answer
30 views
Cannot change anything in chart options
I have a bar chart and I would like to change the font color, border width and some other tings, but it doesn't work. It is in my computed property. In the chartOptions I want to change the y axis min ...