12,379 questions
0
votes
0
answers
26
views
Chart.js barplot keeps getting bigger without stopping
Just like the title says. I have a chart that when I open the page it keeps getting bigger and bigger and bigger. I genuinely don't understand why because I have another plot pretty similar with the ...
- 43
0
votes
0
answers
32
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,073
0
votes
1
answer
22
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
0
answers
29
views
How to display percentages (not raw numbers) in a Doughnut chart using Chart.js and PHP? [closed]
I'm working on a project where I need to generate a Doughnut chart displaying the percentage distribution of different emotions based on data stored in a CSV file. I’m using PHP to parse the CSV and ...
0
votes
1
answer
30
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
-1
votes
0
answers
41
views
Zoom in ChartJS is not centered in the mouse position
I'm having trouble with the zoom using ChartJS. I'm using a canvas with a candle chart to display the stock price and other two canvas to display bars for the volume.
The problem is that when zooming, ...
1
vote
1
answer
42
views
Custom sorting of bars within x-axis groups
I'm hoping someone has figured out how to properly sort "datasets" within their clusters in a ChartJS Bar chart. Below is an example of a bar chart in ChartJS with multiple "datasets&...
- 11
0
votes
0
answers
32
views
Ensure that the axis covers the entire canvas - Chartjs 3.7.1
I cannot seem to find a way to control these spaces on the side of my chartjs chart. According to the time range, it seems to generate different spaces on the sides. Are there any way to ensure that ...
- 13
1
vote
1
answer
50
views
update data charts js Angular
This is my typescript code:
public barChartData: ChartConfiguration<'bar'>['data'] = {
labels: [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ],
datasets: [
{ data: [ 65, 59, 80, ...
- 3,417
0
votes
0
answers
40
views
hide annotation when clicking legend toggle
I'm using the annotation plugin to show a vertical line on my graph.
const options = {
legend: {
position: 'bottom',
onClick: (e, legendItem, legend) => {
...
- 19
0
votes
1
answer
36
views
How to show Js.Chart in Arabic
This is my client website. It shows the gold rate in the UAE in Arabic. I have embedded Chart.js, which displays the gold rate for the last four years, but the chart is in English. I am facing two ...
- 1
0
votes
1
answer
20
views
Is there a plugin in chartjs that show a paired result i.e. high and low on the same axes?
I'm trying to find if there is an existing plugin that can show below in chartjs
Blood Pressure Graph
It looks like this could be achievable in high charts
```
https://jsfiddle.net/ssdg6nug
```
This ...
- 13
0
votes
1
answer
50
views
How do I use ChartJS Annotations plugin to show patterns instead of colors as a box
I understand that I can use type = label to show image in annotation as describe below
https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/label/image.html
But I'm wondering if it's ...
- 13
0
votes
0
answers
42
views
Chartjs is adding values which is not there in data
This is my code
import "chartjs-adapter-moment";
import LoacalLoader from "@components/Loaders/LocalLoader";
import Text from "@components/Text";
import {
CategoryScale,...
1
vote
1
answer
45
views
Annotations on ChartJs shows on top of the plots when opaque is one
I'm trying to use ChartJS, this is what I get when using annotations plugin with opacity = 0.5
box1: {
type: "box",
drawTime: "afterDraw",
yMin: 22,
yMax: 40,
...
1
vote
1
answer
29
views
Chart.js register functions not recognizing any extensions (chartjs-chart-geo and chartjs-chart-wordcloud)
I'm working on a dashboard for a web application. The application uses Flask, and the dashboard is built with the Chart.js framework. For some charts, such as a word cloud and a Choropleth to display ...
- 13
1
vote
2
answers
28
views
Get chart image but without rendering chart
I'm using react-chartjs-2 but I need to get chart only as image, without rendering it.
I can't render it because I need to print the image inside a PDF document (react-pdf); if I put the chart ...
- 79
0
votes
1
answer
21
views
How to set active background color on click?
I am using chartjs-chart-venn to create a Venn diagram. I need to set an active background color for the clicked section on click. Additionally, I want to highlight the entire circle on hover.
I tried ...
- 1
-1
votes
0
answers
29
views
How to write a user defined text inside the chart area
I am new to ChartJS so I am not sure about this live chart with text editor area to write user defined text functionality, which is available or not(see the below image for more detail).
Live chart ...
0
votes
1
answer
46
views
ChartJS - Stacked Bar Chart, unable to trigger callback function for tooltips
I have a stacked bar chart, but I am unable to trigger the callback functions associated with the tooltip.
import Chart from "chart.js/auto";
import { Bar } from "react-chartjs-2";
...
- 19
1
vote
1
answer
32
views
Fill chart with n bars but calculate the width of the bars to always keep the same gap
In ChartJS, I would like to distribute bars n over the length of the x axis. We can ignore the y axis for now as everything works as expected.
What I would like to achieve is, that the gap of the bars ...
- 14.7k
1
vote
1
answer
20
views
Changing legend behavior from strikethrough to color change
As I've found strikethrough to be very annoying as it obscures the text so it's sometimes difficult to tell what the legend label is when hidden, I wanted to change the behavior and so that, instead ...
- 33
1
vote
1
answer
31
views
Give box annotation only left and right border but not on top and bottom
I am using ChartJS annotation plugin in order to display some annotations.
I am using the box annotation, but I am not sure how I can display a border for that annotation only on the left and right ...
- 14.7k
2
votes
1
answer
38
views
Annotations will stop drag once mouse moved too fast or going over another element
I am using ChartJS to display a chart and would like to interact with the annotations via the annotationsplugin.
In addition the annotations are draggable, so the user can drag them around freely. I ...
- 14.7k
0
votes
0
answers
32
views
Chart.js LinearScale declaration in Import statement throws warning in VS Code
I have working v4.4.6 Chart.js code implemented in vanilla JS. It's using an import statement for tree shaking thus:
import {Chart, LineController, LineElement, PointElement, CategoryScale, ...
- 59
1
vote
1
answer
33
views
Annotation dataset position instead of pixel position
I am using ChartJS to display a chart and would like to interact with the annotations via the annotationsplugin.
In addition the annotations are draggable, so the user can drag them around freely. I ...
- 14.7k
0
votes
1
answer
35
views
Programmatically set layout and ticks padding
I have a use-case where I draw icons above chart.js' ticks. Those icons are responsive so I resize them using options.onResize. I am aware of options.layout.padding.top and options.scales.x.ticks....
- 354
0
votes
1
answer
56
views
Chartjs only showing first digit in data
I am making a stacked chart to display how many hours have been made on a project. The only problem is that chartjs is only displaying the first digit of the data. So it's not that it can't read the ...
0
votes
0
answers
49
views
Chart.js 3.9.1 throws cannot read property of undefined reading prototype error in react
I am using React 16 and try to implement a sankey chart visualization with Chart.js.
Since Chart.js v4 requires Webpack 5 or some other Babel magic that I cannot really change in my clusterf**k of a ...
- 1
0
votes
1
answer
45
views
Using JSON data from an api call to reactively update a chart
I am trying to use response data from my api call to populate a Pie Chart from Chart.js.
The issue is that the UI does not update after the response data is assigned to the chartData object.
These are ...
0
votes
0
answers
65
views
Cannot Implicitly convert 'array' to 'string'...sending data from controller to chart js
Need help with my code
The problem is I tried to pass array from the controller to my page that contain a bar chart. But the chart cannot be displayed because it doesn't correctly received the array I ...
0
votes
0
answers
30
views
How to set time range to bar chart axes by parsing using Chart Js?
I am using ChartJs v3.9.1 in my Angular project. I need to create a timeline and I am trying to create it using horizontal bar chart.
I did horizontal bar chart with time axes but I have a json data. ...
- 81
1
vote
0
answers
35
views
How to incorporate draggable feature into vue-chartjs?
I created a BarChart using vue-chartjs and have marked the threshold values using arrows
Here's the code
<template>
<Bar :data="data" :options="options" />
</...
- 103
0
votes
1
answer
52
views
How to move a legend to another line?
I'm using Chart.js and I'm trying to change the legend output. At the moment I have this code:
chart.options.plugins.legend.labels.generateLabels = (chart) => {
const labels = [
{ text: ...
- 11
1
vote
1
answer
58
views
How to create horizontal scrolling with a locked y axis for Chart.js?
I have a floating chart that I am using as a scheduler and I am trying to make it so the y axis is sticky when scrolling through the chart. I found this site and a video that I was trying to follow it ...
- 548
0
votes
1
answer
54
views
AlpineJs 3 and Charts.js (4.4.6) gives Uncaught RangeError: Maximum call stack size exceeded when calling Chart.update()
I'm tring to update my chart with new data. But whenever I call update functions I get error: Maximum call stack size exceeded.
<div x-data="chartComponent()" class="max-w-xl mx-...
- 61
0
votes
0
answers
12
views
Graph shrinks after resize() when pointRadius is positive
I encountered an issue where the size of the chart changes unexpectedly when the pointRadius of a dataset is modified. Here's a minimal explanation of the behavior:
Initial state: I initialize a ...
- 1
0
votes
0
answers
64
views
Chart.js Panning Not Working in ASP.NET MVC Application Using chartjs-plugin-zoom
I'm developing an ASP.NET 8 MVC application where I'm using Chart.js to display two real-time line charts: one for "Penetration Depth" and another for "Hydrophone Audio Levels." I’...
- 1
1
vote
1
answer
41
views
Setting Chart.js scales y title gives compile time error " type '_DeepPartialObject"
I subscribe to data from the backend to fill my charts, when the data is received I would like to set some options so it goes like this:
this.chart.config.options.scales.y.title.display = true;
This ...
- 2,670
0
votes
1
answer
64
views
Chart.js: Stacked Bar Chart Layout Issue with Additional Single Bar
I'm facing an issue with the layout of my Chart.js stacked bar chart. I'm trying to display a single bar for "前年電力量" (Previous Year's Power Consumption) alongside a stacked bar for "...
- 131
0
votes
1
answer
31
views
How to Make a Baseline Bar Behind Stacked Bars in Chart.js?
I’m trying to create a stacked bar chart in Chart.js where one specific bar (labeled "予想" - prediction) acts as a baseline or background layers. The goal is for this bar to sit visually ...
- 131
0
votes
0
answers
39
views
"You may need an additional loader to handle the result of these loaders" - issues with babel config potentially
Currently working with @mui/x-charts and keep getting the same error no matter what I try. I was trying to work with Chart.js and was getting errors to.
./node_modules/@mui/base/Popper/Popper.js 151:...
0
votes
0
answers
50
views
How to add labels outside the canvas in Javascript using ChartJS
Hello guys i got this problem where im trying to put some labels or kind of annotations outside a canvas that i generate with ChartJS, but im new to using ChartJS and idk if im doing the right way to ...
0
votes
0
answers
47
views
Chart.js Streaming Plugin in FilamentPHP: Error: "realtime" is not a registered scale
I'm trying to integrate the chartjs-plugin-streaming plugin with Chart.js in a Laravel project using FilamentPHP for real-time data visualization. My goal is to use the realtime scale provided by ...
- 198
0
votes
0
answers
41
views
How to make snap scrollable chart like an apple health?
I want to create a chart similar to the orange-colored chart in the GIF which is in Apple Health App with snap-scroll capabilities at both day and week levels,
but I'm not sure how to approach it. Is ...
- 4,531
0
votes
0
answers
30
views
Move ChartJS charts to original position when window maximized
I have a page with multiple charts using ChartJS, each contained in its own div like so:
<div class="formgrid grid gap-2">
...
- 81
0
votes
1
answer
49
views
Is it possible to hide segments in chart.js?
I wonder if I can set the lines to be hidden in chartjs datasets->segment,
like this:
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
const up = (ctx, ...
0
votes
0
answers
38
views
Rails 7 - ExecJS::RuntimeError: SyntaxError: Unexpected token: operator (=) - production assets:precompile error
Upgrading chart.js from version 2.9.4 to 4.4.4.
Locally(Machine is MAC OS), rails app is generating charts with upgraded version.
When deploying to AWS EC2, Jenkins build is failing with this error ...
- 524
0
votes
0
answers
25
views
How to shift line bar graph in chart.js
I am using chart.js to render a bar graph with a line graph overlay. Basically I'm showing revenue vs expenses with the line graph being the net income for the period. I'm showing last year as a ...
- 219
1
vote
1
answer
38
views
Is it possible to create a graph in which a single broad bar contains multiple bars in Angular?
I want to create a graph like this
I haven't been able to find a solution.
I asked ChatGPT for the solution. The code it gave out did not work even after trying to make it work.
At the end of ...
- 838