12,376 questions
0
votes
0
answers
63
views
Add small space between lines and their points [closed]
I have been tasked with implementing the following design using Chart.js:
Almost everything's been implemented (via the Chart.js documentation):
const chart = new Chart(document.getElementById('chart'...
0
votes
1
answer
51
views
Toggle button doesn't show chart from db.json data
I'm starting to learn how to build Angular apps and I need to implement a toggle button that show/hide 2 charts, one chart has static data and the other on call data from a db.json file through a ...
- 13
1
vote
1
answer
34
views
ChartJS make container fill whole CSS grid item
I'm putting a chart (made using Chart.js) inside a CSS grid, and I want the chart to responsively fill the full width of its grid cell. However, even after turning on responsive and turning off ...
0
votes
1
answer
51
views
Charts update leads to unexpected scroll
I am working on an Angular application using Primeng and Chart.js. I have a big webpage with many forms and charts. When I update one field of my forms, I need to update the corresponding charts. All ...
- 113
0
votes
2
answers
52
views
Prevent hiding of second-last grid line [closed]
I'm using ChartJS with Vue:
"chart.js": "^4.4.9",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
My line chart has data where the x values ...
- 2,229
0
votes
0
answers
68
views
Chart.js throws "Cannot set properties of undefined (setting 'cp1x')" only in production build with Next.js, but work fine in dev mode
I'm using Chart.js (v4.x) with Next.js (v15) to render line charts. Everything works perfectly in development (npm run dev), but when I build the project and run it in production mode (npm run build &...
0
votes
0
answers
34
views
How to change Chart.js segment color in AJAX data response
In Chart.js v4 I know that I can use a function to style segments as described here: https://www.chartjs.org/docs/latest/samples/line/segments.html:
segment: {
borderColor: ctx => skipped(ctx, '...
- 23k
0
votes
0
answers
36
views
Chartkick time zone aware labels with time series
I'm using Chartkick 5.1.4 with Rails and code like the following in my view:
<%=
line_chart(
charts_data_last_1_hour_path,
:refresh => 60,
...,
:library => {
:scales =...
- 15.3k
0
votes
1
answer
59
views
Doughnut ChartJs shrink when hover
I'm using doughnut chart from chartJS for my project. For some reason, it become smaller when I hover into center area of the chart. Below i have a link to the video how its looks like. I want to find ...
- 5
0
votes
1
answer
32
views
In chart.js datalabels plugin for type 'scatter', use 'value' in backgroundColor function to set color
In chart.js datalabels plugin, I can add 'value' to the backgroundColor function like so:
backgroundColor: function (value, context)
I can then use const pointset = value.dataset.data; to get the ...
- 67
0
votes
1
answer
35
views
How to call afterDraw, afterLayout or afterUpdate chartjs v4
I am trying to call afterUpdate, afterLayout or afterDraw
I try to directly put this in plugns or annotatinos,
However nothing works, how can I make this correctly?
What I want to do is written here, ...
- 12.5k
0
votes
1
answer
23
views
How to bind values from a database to chart.js
I try to get some chart with chart.js with data from a database.
If I put it directly inside the array its works fine, if i try to bind it inside a foreach loop I get "the variable $subs" is ...
1
vote
1
answer
34
views
Auto Y scale not working when zooming and panning with data update from server
I have a temperature chart, with X axis = time, and Y axis is temperature.
Because I have data collected every minutes since several years, I have a lot of data, and I don't want to display all of ...
- 744
0
votes
0
answers
24
views
Chart.js CDN refusing to load
I'm trying to use Chart.js to load some components, but I don't know why I keep getting this error:
Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js' because ...
1
vote
1
answer
86
views
chart.js line segment coloring
in chart js (4.4.8)
i want to give discrete line colors based on a baseline and threshold value of the data point.
when i give line segment colors it appies color to whole line segment and looks ...
- 25
0
votes
1
answer
33
views
Using chart.js with a background image plugin, can't get entire image to show
I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.
I'm using the plugin, instead of a CSS background, because I need the image to stay with the chart ...
- 67
0
votes
1
answer
54
views
Chartjs: Connect canvas background image and chart (type: 'scatter') so that data points remain in same spot on image?
I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.
It is better at staying in place than a css background image, however, when the window is resized, the ...
- 67
0
votes
0
answers
37
views
Is there a solution to Chart.js improperly outputting pie/doughnut charts?
I am making a website which is predominantly for data visualisation, data is selected by the user (who also selects a chart type) and returned with PHP and I'm using Chart.js on the client side to ...
- 1
0
votes
0
answers
19
views
How can I make my custom plugin execute before the Tooltip plugin?
I have written a custom plugin for ChartJS v4 in my application, and I am instantiating it in my chart instance like this:
new Chart(myCanvas, {
plugins: [
new MyPlugin(...)
],
//...
- 8,071
0
votes
1
answer
28
views
Controlling tick marks and lines in chart.js time scatter plot
Concerning this jsfiddle which uses chartjs v3.9.1 and the date-fns adapter:
https://jsfiddle.net/0a6c1ty5/22/
I'm trying to format the tick labels in the function tick_label but I'm only getting a ...
- 52.1k
0
votes
0
answers
41
views
Chart.js tooltips not showing when zooming out unless maintainAspectRatio: true, but it breaks chart layout
I'm using latest Chart.js 4.4.8 to render a line chart inside a flex container. The tooltips work fine initially, but when I zoom out in the browser, some tooltips stop appearing. The more I zoom out, ...
- 25
1
vote
0
answers
45
views
How to add Image and text in data label and legend in pie chart?
I have created SPFx React project and integrate chart js library in that projecct
I have used "chart.js": "^3.3.2" version.
I need to add an image/icon in data labels and legends.
...
2
votes
1
answer
59
views
Display Chart.js chart(s) depending on Livewire form submission
I am trying to display one or more charts using Chart.js and Laravel Livewire. My issue is that the chart isn't displayed, even if the chart object receive data (when I console.log(chart) I can see ...
- 31
1
vote
2
answers
49
views
ChartJS to show image on y-axis
This is part of chart code. I am trying to show the image on the yaxis. My first problem is that the img.onload does not hit because It does not set the width and height. 2nd it just show [Object ...
0
votes
0
answers
37
views
Django with chartjs > 2.9.3
I'm using version Django==5.0.6 and attempting in integrate charts using chartjs and plugin datalabels.
When I use the charts render without issue, but I'm not able to see any datalabels.
If I try to ...
- 45
0
votes
2
answers
63
views
Charts.js tooltip position not working properly on Zoom In
I have created a React Application.I was working on dasboard page, in which i have used chart.js for displaying data in Barchart,Pie Chart.All things was working fine,but when i try to zoom in the ...
- 1
0
votes
0
answers
55
views
Chart.js streaming showing time (HH:MM:SS - 24 hour clock) on xAxis
I have seen a very similar question already, that concerns chart.js, but I am using the chart.js streaming plugin(https://nagix.github.io/chartjs-plugin-streaming/latest/). Therefore my code looks ...
- 637
2
votes
1
answer
47
views
Make a parallelogram from the line graph
I'm using vanilla JS with Chart.js. I want to make this line graph into something parallelogram.
Currently looks like this
Want something like this
And my code is this:
var chart = function () {
...
- 23
1
vote
2
answers
53
views
Creating a Bar Graph to compare two values (graph doesn't always start at zero)
I have already entered the code to make the bar graph start at zero, although whenever my numInput.value becomes less than totalEmissions, the graph for some reason starts at numInput.value, rendering ...
- 11
1
vote
1
answer
44
views
Is it possible to make the tooltip scrollable in Chartjs, react?
I want to make a scrollable tooltip in Chartjs because I have a lot of data to show.
I have made an external HTML tooltip referencing the official document, but I am not sure how to make it scrollable....
- 11
3
votes
1
answer
50
views
Chart.JS - Remove only the second vertical line
I have a very simple Chart.JS line graph. I have setup everything, but the designer wants to remove the first and the last x lines and needs the labels at the center of the chart. I have tried several ...
- 322
0
votes
1
answer
58
views
Remove Spacing from the bars for Q1 and Q2 I am using chartjs version 2.7.2 and angular chart js version 1
In your Chart.js bar chart, experiencing unwanted spacing between the labels Q1 and Q2 when the corresponding data values are 0. Even though the bars with 0 values are not visually displayed, Chart....
- 103
0
votes
1
answer
56
views
How to modify the legend of Bar Chart [closed]
I am using chartjs with react
import { Chart,Line,Bar,Pie } from 'react-chartjs-2';
var data = {
options: {
legend: {
position : 'right',
},
title:{
...
- 12.5k
0
votes
0
answers
63
views
Migration to Angular v17 with ng2 charts v2
I'm working on migration of Angular 14 project to Angular 17. One of the main obstacles is that the app has some ng2 charts that are version 2 which is not compatible with newer versions of Angular. ...
- 7
1
vote
1
answer
79
views
How can I change the color of the grid in this chart using Chart.js
Im trying to change the color of the grid lines since my background is dark. I have managed to change the color of the ticks, and the line itself. However I've been trying to change the grid color for ...
0
votes
1
answer
65
views
Line chart(ChartJs) with huge set of nested data, is freezing the screen. How to optimize it?
I'm building a line chart, where the line color and the background will change based on different conditions.
As line chart in chartjs dosen't support multi background color. So I nested the data from ...
1
vote
1
answer
44
views
How to optimize chart rendering using Chart.js in Ionic?
I'm building an expense manager application where I have a stats tab containing two subtabs, expenses and incomes each of which has its own chart instance. Rendering is first slow, it takes some ...
0
votes
0
answers
42
views
How to make the distance between the bottom label and the bottom the same as between the other labels
In Chart.js, how to make the distance between the bottom label and the bottom the same as between the other labels. The first picture is what I have, the second is how it should be.
const chartOptions ...
- 11
0
votes
1
answer
46
views
Min. height for stacked bar chartjs
I've a vertically stacked bar chart in chart.js. Since the bars are being generated based on some userinput, it's possible that I get a chart that would look something like this:
I want to enforce a ...
- 3
1
vote
1
answer
48
views
How to listen to chartjs-plugin-zoom's events in another Chart.js plugin
I'm writing a custom plugin for Chart.js 4 and I want my plugin to behave well with the chartjs-plugin-zoom plugin.
In order to do this, I need to listen to the chartjs-plugin-zoom events (onZoomStart,...
- 8,071
1
vote
1
answer
61
views
How to restrict category type axis in chart.js to bottom of graph?
I use the R1, R2 and R3 labels in the bottom left corner to track the on-off state of some properties. I want them to be on the bottom of the graph just like they are here, but the way I solved this ...
- 5,111
2
votes
1
answer
60
views
chartjs 4.4 : not able to plot 2 time series in 1 graph
I have an issue with plotting 2 lines in 1 graph using chartjs: I get 2 graphs with 1 line in stead of 1 graph with 2 lines, and I think I made a very simpe error, but I can't find it. I have spend ...
- 63
0
votes
1
answer
70
views
EvoPdf not rendering chart from chart.js
I am using EvoPdf version 7.5. We have this html that has been used to generate a pdf report for quite some time with no issues, but its just straight up HTML and css, there was not javascript being ...
- 11
1
vote
1
answer
59
views
How to center the labels of a horizontal stacked bar chart in Chart.js?
I have created an horizontal stacked bar chart using Chart.js and Chartjs-plugin-datalabel. Here are the options I defined for the chart :
{
indexAxis: "y",
animation: false,
...
- 113
0
votes
1
answer
73
views
ChartJS realtime waveform getting mixed up when chrome tab swtiched back and forth
Am having a simple application that constantly gets waveform data and displayed in my browser (chrome), chart.js mode is set to realtime. It works well when the chrome browser tab stays on, even when ...
- 331
1
vote
1
answer
65
views
Chart.js, show tooltip even if there is no data available for the label
Image here
Currently using chart.js plus a custom tooltip that's worked great so far, but a new use case is to now show the tooltip even when there is no data. (See the image attached).
In this case, ...
0
votes
1
answer
62
views
Creating a line chart with a JSON file in Chart.js [closed]
I'm looking for someone who can help me coding/creating a (automatically updating) line chart with data from a online JSON file. The JSON file I want to use contains different kinds of data. But I ...
0
votes
0
answers
67
views
Issue with Y-Axis Ticks in Chart.js (v4.4.7)
I'm working on a project using Chart.js version 4.4.7, and I'm encountering an issue with the y-axis ticks. I want to replace numeric tick values (like 20, 40, 60, 80) with custom labels (e.g., "...
0
votes
1
answer
48
views
Not able to make the bars in horizontal chart center in chart.js
I tried all the options but the end bars are close to the border and other bars are not center. I tried using all the options for the horizontal chart from chart.js documentation but the bars are not ...
0
votes
2
answers
37
views
Line annotation not updating position although update() called
My line annotation is not changing its position although i'm rerendering the chart. I can't figure out how to update the annotation line dynamically.
videolist.component.html
<c-card-body>
&...
- 3,801