12,385 questions
6
votes
4
answers
5k
views
How to detect click on chart js 3.7.1 axis label?
How to detect click on an axis label with chart.js
In the example bellow, I can only detect click on the graph itself
https://stackblitz.com/edit/ng2-charts-bar-template-qchyz6
- 75
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 ...
- 8,055
2
votes
2
answers
4k
views
How can I automatically wrap tooltip text content to multiple lines?
I'm using ChartJS to generate some charts. The data point tooltips are generated using callbacks via the configurations option:
tooltips: {
position: 'average',
mode: 'index',
intersect: ...
- 5,396
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
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
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
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&...
- 15.8k
1
vote
2
answers
997
views
Chart JS - Is there a way to connect two datasets in a line chart?
I am trying to connect two data in a dataset of Chart but I can't figure out how to do so, currently my chart looks like this:
I wanted to connect it like this:
Here's my code:
&...
- 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 ...
-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
votes
1
answer
5k
views
chartjs Show tooltip automatically
I create charts for weather. I want to show automatically the tooltip on the last datapoint, when the chart is created. When the mouse is moved to another datapoint, the tootip should move to the new ...
- 10.3k
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 ...
6
votes
4
answers
1k
views
Symfony UX Chart.js just display a blank square
I have followed the official tutorial to get my chart on symfony : https://symfony.com/bundles/ux-chartjs/current/index.html
But the chart does not display, it is just blank. I head that it may be ...
- 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
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) => {
...
- 15.1k
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
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, ...
- 54.2k
4
votes
3
answers
22k
views
Display all labels in Chart.js
I have a problem with the graphics of CHART.JS. When I put the time interval of 2 years, some labels of the months overlap. I want all the labels to appear, the time interval doesn't matter.
var g = ...
- 4,209
-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 ...
- 15.8k
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 ...
- 515
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 ...
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 ...
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
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
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 ...
- 8,055
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 ...
- 8,055
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 ...
- 15.8k
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 ...
- 8,055
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 ...
- 8,055
0
votes
1
answer
880
views
Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
My blade file code is:
@foreach ($radio_data as $data)
<div style="text-align: center" class="row">
...
- 47.7k
10
votes
1
answer
31k
views
How to show percentage (%) in chart js
I want to show a percentage sign in the chart.I take data from my database from controller and show the data from vue js file.Here is my chart code.
<script>
import { Doughnut } from 'vue-...
- 47.7k
4
votes
2
answers
5k
views
Chart.js line chart with area range
I'd like to add another dimension to a Chart.js line chart, similar to the chart below, or this Highcharts example. I'm having difficulty understanding where I'd be able to implement such a feature, ...
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’...
- 21.1k
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 ...
- 8,055
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 ...
- 8,055
2
votes
3
answers
16k
views
Conditional in ChartJS axes tick callback function isn't returning the expected labels
I have a chart containing data for each day of the year and I'm wanting to show the x-axis simply as months.
I've set up the following callback function which (crudely) grabs the month from the set of ...
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
1k
views
Chartisan/Laravel - > "Call to undefined method" error
I am trying to figure out how to use Chartisan and my controllers in Laravel. Having spend a couple of days on this, I have to admit that I am missing some fundamental because I understand the error, ...
- 47.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 ...
- 8,055
0
votes
2
answers
2k
views
ChartJS hover tooltip colors not showing their correct color
I have this chart made with ChartJS. I've gotten it to work so far, but, when adding more data such as 2 lines.. The tooltip looses it's colors. I'm talking about the white boxes to the left of the ...
- 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....
- 318
2
votes
3
answers
2k
views
How to use chart.js in angular
I'm trying implement chart.js in my angular project. There're not any error when compiling but the chart isn't showed. I don't know why.
This is chartjs.component.html
<canvas id="canvas">{{...
3
votes
2
answers
1k
views
Points cut at half at the edges of top and bottom, at chartjs
As showed in the picture the points are cut in half when reaching bottom or top edges (when the data is 1 or 5 in this example).
I tried padding, adding some 'fake' data to extend the limits of 1 and ...
- 1,641
7
votes
4
answers
11k
views
Get X, Y onClick chart coordinates in ChartJS
How do I get the X, Y coordinates relative to the chart with the onClick event in ChartJS V > 2.0?
Take this JSFiddle as an example. A scatter is created in #canvas. When clicking on the center of ...
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 ...
- 700
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 ...
- 14.5k
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 ...
- 121
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: ...
- 965