12,373 questions
0
votes
1
answer
38
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
24
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
33
views
How to make the distance between the bottom label and the bottom the same as between the other labels [closed]
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 ...
- 11
0
votes
1
answer
32
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
33
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,...
- 7,987
1
vote
1
answer
54
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,081
0
votes
0
answers
30
views
Chart.js tooltips not showing text with plugin callback label [closed]
I am trying to get custom tooltips on my chart. For some reason these tooltips aren't working. Any help is appreciated.
head
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart....
- 1,990
-1
votes
0
answers
32
views
Date FNS module of Chart Js axis is displaying improperly [closed]
Here is my code I am using the date-fns module with chart js, the x axis fails to display some months and the spacing between the bars are also weirdly off-centered.
I tried offsetting the timezone, ...
2
votes
1
answer
54
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
51
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
38
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
61
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
55
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
55
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
52
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
45
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
0
answers
43
views
How to make custom vue-chart.js plugins reactive
Im working with vue chart.js and wanted to create a gauge chart. I was able to create it successfully, but im having a hard time to make the data im using in my custom plugins to be reactive (For ...
- 13
1
vote
2
answers
36
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,803
1
vote
0
answers
62
views
Chart.js - Invalid scale configuration
Below is the code snippet for scale configuration, which shows error on browser console.
The Error shown in console as:
"Invalid scale configuration for scale: x"
Moreover, if I remove [ ] ...
- 23
1
vote
1
answer
82
views
How to make datasets' line always appear on top of other datasets' background on a line chart in ChartJS?
I have a line chart with 2 datasets that overlap. Each dataset has background and a line color.
I want to make all datasets lines (borders) appear on top of all backgrounds. And making the background ...
- 339
1
vote
1
answer
43
views
Vertical stack bar displays zeroes / "invisible" values with Chart.js
I'm trying to make a vertical stack bar plot with Chart.js.
It works pretty well but for some labels (i.e., for one vertical part of the graph) I don't necessarily have strictly positive values for ...
0
votes
0
answers
44
views
vue-chartjs "Module not found: Error: Package path ./dist/Chart.js is not exported from package"
I'm trying to use vue-chartjs but I'm having issues with the dependent chart.js installation.
Error:
ERROR in ./node_modules/vue-chartjs/dist/index.js 1:0-190 Module not found: Error: Package path ./...
- 1
1
vote
1
answer
65
views
How do we add labels like the image?
I have created the SPFx React project.
I have implemented a bar chart using PrimeReact charts.
To my knowledge, PrimeReact uses the ChartJs library on the back end.
I need to add a label and value ...
- 112
1
vote
1
answer
61
views
Stacked bar chart with multiple bars of the same type in each stack
I'm trying to recreate the top graph in chartjs. The one at the bottom is my attempt using a bar chart in chartjs.
I don't know how I can add multiple good and bad bars on each row. Furthermore, each ...
- 43
1
vote
1
answer
49
views
How to align stacked bar chart label to the left and have it ellipse if the text is too long
I have a Chartjs stacked bar chart where I want to have the data label aligned to the left, and elapsed (...) if the text is too long.
My chart is set up as follows.
this.chartData = {
labels: ...
- 7,883
1
vote
0
answers
89
views
How to show total sum on top of each bar in bar chart in addition to labels within bars [duplicate]
Goal:
Each bar should have a total sum on top of the bar. For instance, Bike's total sum is 33.
Problem:
Is it possible to do it in this chartjs?
Other:
https://jsbin.com/leduqarini/edit?html,output
...
- 14.1k
0
votes
0
answers
32
views
Show total sum of each stack bar
Goal:
Each bar should have a total sum on top of the bar. For instance, Bike's total sum is 23.
Problem:
Is it possible to do it in this chartjs?
Other:
https://jsbin.com/leduqarini/edit?html,output
...
- 14.1k
1
vote
1
answer
67
views
Show value data in the bar
Goal:
Show the chart with visual data with numbers in each box.
Problem:
Is it possible to do it in this chartjs?
https://www.geeksforgeeks.org/how-to-dynamically-update-values-of-a-chart-in-chartjs/
...
- 14.1k
0
votes
0
answers
40
views
Can this type of chart be drawn with chartjs, and what would a chart of this type be called? [duplicate]
I want to create a visual representation of items in a store being out of stock over a period of time.
I want to draw a chart, with dates at the bottom along the X axis and items being listed along ...
- 1,845
0
votes
1
answer
21
views
Increase the y height in the bar chart
Goal:
Increase the height of the y axel that should be 30 instead of 20. Look at the black mark selection.
Problem:
Is it possible to do it?
Other:
https://jsbin.com/vupoxuraju/edit?html,output
&...
- 14.1k
0
votes
2
answers
31
views
Remove the label in the black selection [duplicate]
Goal:
Remove the icon, and the text (black selection from the picture). I want only to show the bar chart and no interaction with the cursor.
Problem:
is it possible to do it based on the source code?
...
- 423
1
vote
1
answer
56
views
Unable to put JSON data into Chart.JS
I'm new to Chart.js, and am trying to display a bar chart, with data called using jquery's AJAX call to a PHP file contains mysql query where the data are stored.
The page where the chart is ...
- 13
0
votes
0
answers
45
views
How to use Chart.js in a content script (content.js) for a Google Chrome extension to inject into an existing website?
I'm working on a Google Chrome extension and I want to inject a Chart.js chart into an existing website. I have the following scenario:
I need to use Chart.js to render a chart dynamically.
The ...
- 11
0
votes
1
answer
45
views
Rotate and change position of a axis title on ChartJS
an image would be easier to understand :
I've got this chart made with ChartJS 3, and I'd like to put the "€" symbol on top and rotate it so that we read it easily.
How can I do this ?
This ...
- 1
0
votes
0
answers
19
views
Bars in bar chart takes more width in ios device
Bars in bar chart take more width in ios devices like ipad and iphone as compared to other devices.
It should take the same width as in other devices.
Here is the code
scales: {
x:
...
1
vote
1
answer
41
views
react-chartjs-2 chartref update doesn't work
This is my script of React component,
It dosen't show the label, however dataset is correct,
So I guess this is the problem of update?
I really appreciate any hint,
import React,{useRef,useState,...
- 12.5k
1
vote
1
answer
48
views
chartjs / ng2-charts charts does not work properly in display flex
In my Angular app, I use chart.js and ng2-charts to create some charts. I want to have two doughnut charts side-by-side horizontally, that can grow and shrink equally when the browser window is ...
- 945
2
votes
1
answer
106
views
How To Change Candlestick Logic In Chart.js On The Previous Close
By now, everyone knows that the candles on a financial chart should be green if the close is higher than the open and red if the close is higher than the open.
This is a sample
https://www.chartjs.org/...
- 181
1
vote
1
answer
81
views
Is there a way to get the difference between 2 points by click and hold with the mouse on a line on chart.js?
I have seen so many custom charts and I would like to know how to modify them too.
Is there a way on such a chart chart.js
<!DOCTYPE html>
<html lang="en">
<head>
<...
- 181
2
votes
0
answers
48
views
I want a feature to display a graph with a canvas layer on top for drawing lines and adding text, like traders do
There is chart data coming from the backend, and I’m using React.js on the frontend. I want to display this chart with a canvas layer on top, allowing users to perform analysis by adding lines between ...
- 21
1
vote
2
answers
70
views
Change color of other slices on hover with Chart.js 4
I'm trying to change the color of other slices when hovering one of them, but is a little buggy sometimes and I'm trying to understand why.
As shown in the example, there is a flickering when hovering ...
- 369
0
votes
1
answer
49
views
Updating Data in a simple Chart.JS chart
I know this has been asked before many times but I am curious to see what I'm doing wrong with this simple Chart.JS chart and adding data to it.
<!DOCTYPE html>
<html lang="en">
&...
2
votes
1
answer
60
views
How to Create Dual Bars with Hollow Max and Solid Current Values in Chart.js?
I'm trying to create a grouped bar chart using Chart.js, where each group has two bars (e.g., green and red). For each bar:
The solid part represents the current value.
The hollow outline represents ...
0
votes
1
answer
38
views
How to create simple linear chart?
I try to create a simple chart with several lines and common axis. Lines are given by sets of points, points with x and y - integers. Fg Line 1 is [{x: 10, y: 10},{x: 20, y: 15},{x: 30, y: 10},{x: 40, ...
2
votes
2
answers
72
views
Format Dates in Chartjs x Axis
The dates in the x axis are showing times and time zones. I just want to show month and day.
function dateSeries(startDate, endDate) {
let dates = [];
let currentDate = new Date(startDate);
...
- 33.2k
0
votes
0
answers
24
views
other ways to use a theme styling from globalStyles using styled-component on chart.js
I’m working on customizing a line chart in Chart.js for the application I’m building, but I’ve been unable to apply the theme styling from my GlobalStyle setup. I’m using styled-components for my app. ...
0
votes
0
answers
29
views
Plot fill graph Chart.js with vertical edges
I need to plot series with vertical edges. But it seems duplicate x may confuse chart.js so it does not render correct plot.
My current approach is slightly modify the x to make them different. ...
- 4,748
0
votes
0
answers
61
views
How to handle event on data label in Vue Chart.js?
This is my chart component and I want to handle events on labels I define in data. I would like to show the tooltip with bar data when I hover on a label.
<template>
<Bar :data="data&...
- 1,093
0
votes
1
answer
26
views
Callback Return None removes gridlines
In chart.js line chart, I place a vertical grid line in only every 720 ticks, which works fine.
then I add a number on the x axis using callback and it removes my nice gridlines.
this is also ...
0
votes
1
answer
49
views
How to show tooltip for points with null values in chart js?
I'm using Chart.js to display a line chart with custom tooltips. I have implemented the custom tooltip rendering logic using the external option in the tooltip plugin. However, when there are points ...
- 15