12,389 questions
0
votes
0
answers
27
views
Chart.js barplot keeps getting bigger without stopping [closed]
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
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
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
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 ...
-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
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
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
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
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,
...
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
-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 ...
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
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
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
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
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
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
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
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
1
vote
1
answer
95
views
How to avoid chartjs line coming down when adding new value?
I’ve created a line chart in Chart.js that updates every second with new values. However, there's a small issue: when a new value is added, the animation starts from the bottom and moves up to the ...
- 27.4k
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
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
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
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
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
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
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
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
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
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
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
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
3
votes
1
answer
86
views
Donut with rounded edges in one direction and white border between the segements
Chart js Donut segment is not displayed in one direction. First and last segments are not working as expected
Expectation : Need chart js donut rounded segments displayed in one direction with white ...
- 33
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 ...
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
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
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
1
answer
47
views
How to make a line chart with unequally spaced x values
Making a scatter plot with vue-chartjs <Scatter> was perfect:
Now the user asks for the same chart but with points connected. So I tried to change <Scatter> to <Line>. But the ...
- 1,729
0
votes
1
answer
119
views
chartjs-chart-financial in next.js is not showing
I am working on a simple Chart dashboard app in Next.js, using Chart.js. I am trying to add a Candlestick chart component, for which I use the chartjs-chart-financial library. However I only get an ...
- 21
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
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
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
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
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
1
answer
61
views
Customize ChartJS Dougnut Border on Hover
I have this following Prototype created by our Designer using Figma.
My stack is:
Vuejs
Bootstrap
ChartJS
So my questions is can we add this custom border on certain segment on click?
Goals:
Add &...
- 31