29 questions from the last 30 days
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
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
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
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
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
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
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
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
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 ...
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
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, ...
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
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
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
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
-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
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
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
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
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
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 ...
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
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
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
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
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
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
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
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,...
