12,358 questions
0
votes
2
answers
21
views
Using different legend labels for each curve of a 2 lines graph
I am using Chart.js and try to make line chart with 2 curves.
I want different fonts styles for legend labels for each curve.
Here is my code:
const ctx = document.getElementById('myChart');
const ...
- 1
0
votes
1
answer
60
views
Rails 8 importmap and chart.js
Installing chart.js to Rails 8 with importmap
Install package
bin/importmap pin chart.js
Pinning "chart.js" to vendor/javascript/chart.js.js via download from https://ga....
- 101
-1
votes
1
answer
72
views
React-ChartJS-2 Radar chart still showing default point labels even when pointLabels.display is false
I’m building a Radar chart in React using react-chartjs-2 and Chart.js v4.
I want to disable the default black “point labels” (around the circle) because I’m drawing my own custom labels with a plugin....
Best practices
0
votes
1
replies
37
views
How to instantiate generateLabels callback so that a returned legend item introduces a newline in the legend
When using options.plugins.legend.labels.generateLabels , I would like to group legend items in multiple rows, by introducing a newline.
I would like to use the 'native' legend plugin, and avoid ...
- 506
Tooling
1
vote
0
replies
80
views
What is the best React-based charting library for interactive plots with large datasets?
I'm currently evaluating React-based plotting libraries for a project where we need to implement interactive charts such as line, bar, and scatter plots. The goal is to find a library that offers good ...
- 754
0
votes
1
answer
58
views
How to make the legend vertically centered?
Im trying to add some space on legend but when i increse height liek that it increses space but its aligned at top so all the space is addign to bottom but since i positioned my legend at bottom i ...
0
votes
1
answer
80
views
Chart.JS overflowing labels
I am using the ChartJS library with a Vue Chart wrapper library.
Playground/Demo
My current issue is, when you open the playground, you can see the date labels on the X axis sort of "overflow&...
0
votes
1
answer
63
views
Specify label for each point in scatter graph
The following code contains a simple chart.js sample that works in angular component. The charts contains 2 points in one dataset.
How can I specify label for each point that will be displayed near ...
- 655
1
vote
1
answer
68
views
Any way to make Chartjs radar chart size independent of label lengths?
ChartJS automatically scales radar charts to fit the containing element. This ensures labels on the left and right are completely displayed.
However, if the rendered label lengths differ, this means ...
- 1,451
0
votes
0
answers
30
views
How can I return executable Javascript from my TYPO3 dashboard chart's data provider?
I'd like to implement line segment styling in a TYPO3 dashboard widget.
My data provider implements TYPO3\CMS\Dashboard\Widgets\ChartDataProviderInterface and provides a getChartData() method which ...
- 4,247
0
votes
0
answers
38
views
Inconsistent legend overflow in Chart.js 3.7
I have a line chart built in chart.js 3.7. The legend items at most screen widths need to overflow into a second line. However, this only happens about 50% of the time the chart loads.
The first image ...
4
votes
1
answer
90
views
Line fill borderradius in Chart.js
Is there a way to add a borderradius to the fill background on a line chart in Chart.js?
An example of what I want to achieve:
Line fill with borderradius
I've used fill: 'start' on the dataset and ...
-2
votes
1
answer
73
views
jQuery not grabbing form setup in chart.js loadCallback function
I have a form appearing in a popup, this loads in the content section of chart.js new Popup function. I'm utilizing the loadCallback as described in their documentation to set up actions based on ...
1
vote
1
answer
93
views
How to remove space between bars in a mixed Bar chart?
I need to draw a bar chart, not exactly but somewhat similar, like in the first picture.
I have one stacked bar consisting of 2 bars one narrow bar and one non-stacked with the same width as the ...
- 23
3
votes
1
answer
168
views
Chart.js does not display line, just dots
I updated chart.js from old 2.6 to latest 4.5 and managed to break a bunch of stuff. I fixed all except for two issues:
Line chart that only shows dots and no lines. I know my dataset and
labels (...
- 2,252
1
vote
1
answer
94
views
Adding realtime data to chart.js line charts
I am using line chart (chart.js) to display two pens of data over time. In the sample code below the chart is created and 30 seconds of historical data is immediately added to each pen. Thereafter a ...
- 13
1
vote
1
answer
59
views
chart.js annotation using enter event does not redraw box
I have created an annotation with a label (see jsfiddle).
<html>
<head>
<title>test chart</title>
<script src="https://cdn.jsdelivr....
- 75
0
votes
1
answer
56
views
How to hide tick line for specific ticks in ChartJs?
I want to hide these tick lines (only the part that sticks out from chart) on some specific ticks.
options.scales.x.grid.drawTicks = false;
hides the tick line from all the ticks. I do not want to do ...
0
votes
1
answer
45
views
chartjs dynamically increase line sizing
I'm using chartjs for line charts, and I have this code I'm using to dynamically increase the thickness of the lines:
$(document).on('change', ".line_width", function(e)
{
e....
- 2,098
0
votes
1
answer
218
views
pan feature doesn’t work in chartjs-plugin-zoom
I’m using Chart.js v4.4.3 with chartjs-plugin-zoom v2.0.0. The zoom works with the mouse wheel, but the pan feature doesn’t work, and the onPan callback isn’t triggered despite being enabled and ...
0
votes
1
answer
159
views
Error while creating chart TypeError: Cannot read properties of undefined (reading 'axis') [closed]
I am trying to implement chart js into a vanilla js project, but I cannot seem to make it work.
This is what I am using:
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/chart....
- 91
0
votes
1
answer
101
views
Define fixed width of bars for Chartjs barchart
I work on an Angular application with charts with Chart.js. On the webpage, I have several charts of type horizontal bar charts.
Here is the definition of the chart in the html template :
<p-chart ...
- 123
1
vote
1
answer
89
views
How to center align horizontal bars with multiple datasets?
I've created a bar chart with a couple different datasets, and it works well. However, one dataset is bottom aligned, and the other is top aligned, allowing some minor overlap that would be prettier ...
- 84
0
votes
1
answer
59
views
Set the second y axis to half the length of the first one
I hope that the right Y axis scale of ChartJs is only displayed within half of the length。
And includes the entire range of values.
y1: {
type: 'linear',
position: 'right',
title: ...
- 11
1
vote
1
answer
48
views
Charts data labels with inline registry using custom plugin flickers with react and angular
I've developed a custom element using Lit, incorporating the Chart.js library. This element exposes properties like data, options, plugins, and type, which are used to generate the chart.
When ...
- 11
0
votes
1
answer
77
views
Chart.js Stacked Horizontal Bar Char Leading White Space
I'm using Chart.js in a Vue 3 application. I have this thing just about wrapped up with how I want it. However, there is this small white gap before the start of the graph as it is drawn that I cannot ...
- 1,169
1
vote
0
answers
39
views
How to Handle Dynamic Geolayer and Geozone Names in Chart.js for Excel Report Download
I'm working on a system where users generate reports based on a selected time range, and the report includes charts created with Chart.js. The charts display data for Geolayer and Geozone entities, ...
1
vote
1
answer
165
views
how can I make a custom point style in ChartJS
In ChartJS one can change the point style to some predefined forms. But I need the point style to be an arrow so I tried to customize the point style but didn't succeed.
I tried the following:
...
- 149
1
vote
2
answers
108
views
Update Chart dynamically with React
I'm building a React-based admin dashboard that displays user engagement over time using Chart.js. The chart should update dynamically when new data is fetched from an API.
import React, { useRef, ...
1
vote
1
answer
71
views
Show image background of chart.js Bubbles
i want to add bubble chart using chart.js to my project and i am trying to show image(PNG Format) background of chart.js bubbles like blow image, i saw this topic already, but doesn't work for me ... ...
- 23
0
votes
0
answers
70
views
Chart not interactive even after key update and redraw
I'm using Chart.js (react-chartjs-2) in a React app to render a stacked bar chart with custom plugins and chartjs-plugin-datalabels. It works most of the time, but occasionally on initial load (about ...
- 49
0
votes
0
answers
11
views
Getting chartjs to resize react [duplicate]
I have the same problem as how to get React chartjs to resize back down with window. I can't seem to get the chart to resize when the parent div is resized. After consulting the documentation, I've ...
0
votes
2
answers
81
views
How to maintain chart area in chart.js?
I'm making a website where people can browse data by region. Basically, it shows a bar chart, and there's a dropdown menu at the top that updates the data based on the selection.
One detail I'm having ...
- 153
0
votes
1
answer
116
views
How to highlight all bars of a category when clicked?
i have a set a click event that changes some data based on which category the chart is clicked. however, it is not a very good experience for the user and i want to highlight all the bars of a ...
- 1,340
2
votes
1
answer
72
views
Chart.JS - Highlight the bar category for the area is clicked
I have a click event that changes some data based on which category the chart is clicked. However, it is not a very good experience for the user and I want to change the background color of that ...
- 1,340
2
votes
1
answer
89
views
Chart.js - Click event on the bar chart entire category
So I am using Chart.js in my Ionic Angular project and I am able to attached a click event to tap on a specific bar and get the data. In my case, I am rendering 3 bars in each category. For a better ...
- 1,340
2
votes
1
answer
281
views
How to resolve error: "Could not find 'ChartJsInterop.setupChart'" - When using ChartJsBlazor
Im trying to use ChartJsBlazor with my Blazor WebAssemply project in Visual Studio and I've pretty must just copied the guide from the "Getting Started" section (https://github.com/...
0
votes
2
answers
92
views
Toggle button doesn't show chart from db.json data
I'm starting to learn how to build Angular apps and I need to implement a toggle button that show/hide 2 charts, one chart has static data and the other on call data from a db.json file through a ...
- 13
1
vote
1
answer
105
views
ChartJS make container fill whole CSS grid item
I'm putting a chart (made using Chart.js) inside a CSS grid, and I want the chart to responsively fill the full width of its grid cell. However, even after turning on responsive and turning off ...
0
votes
1
answer
63
views
Charts update leads to unexpected scroll
I am working on an Angular application using Primeng and Chart.js. I have a big webpage with many forms and charts. When I update one field of my forms, I need to update the corresponding charts. All ...
- 123
0
votes
2
answers
73
views
Prevent hiding of second-last grid line [closed]
I'm using ChartJS with Vue:
"chart.js": "^4.4.9",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
My line chart has data where the x values ...
- 2,249
1
vote
1
answer
148
views
Chart.js throws "Cannot set properties of undefined (setting 'cp1x')" only in production build with Next.js, but work fine in dev mode
I'm using Chart.js (v4.x) with Next.js (v15) to render line charts. Everything works perfectly in development (npm run dev), but when I build the project and run it in production mode (npm run build &...
0
votes
0
answers
42
views
How to change Chart.js segment color in AJAX data response
In Chart.js v4 I know that I can use a function to style segments as described here: https://www.chartjs.org/docs/latest/samples/line/segments.html:
segment: {
borderColor: ctx => skipped(ctx, '...
- 23.2k
0
votes
0
answers
52
views
Chartkick time zone aware labels with time series
I'm using Chartkick 5.1.4 with Rails and code like the following in my view:
<%=
line_chart(
charts_data_last_1_hour_path,
:refresh => 60,
...,
:library => {
:scales =...
- 15.3k
0
votes
1
answer
111
views
Doughnut ChartJs shrink when hover
I'm using doughnut chart from chartJS for my project. For some reason, it become smaller when I hover into center area of the chart. Below i have a link to the video how its looks like. I want to find ...
- 5
0
votes
1
answer
43
views
In chart.js datalabels plugin for type 'scatter', use 'value' in backgroundColor function to set color
In chart.js datalabels plugin, I can add 'value' to the backgroundColor function like so:
backgroundColor: function (value, context)
I can then use const pointset = value.dataset.data; to get the ...
- 67
0
votes
1
answer
240
views
How to call afterDraw, afterLayout or afterUpdate chartjs v4
I am trying to call afterUpdate, afterLayout or afterDraw
I try to directly put this in plugns or annotatinos,
However nothing works, how can I make this correctly?
What I want to do is written here, ...
- 12.6k
0
votes
1
answer
39
views
How to bind values from a database to chart.js
I try to get some chart with chart.js with data from a database.
If I put it directly inside the array its works fine, if i try to bind it inside a foreach loop I get "the variable $subs" is ...
1
vote
1
answer
55
views
Auto Y scale not working when zooming and panning with data update from server
I have a temperature chart, with X axis = time, and Y axis is temperature.
Because I have data collected every minutes since several years, I have a lot of data, and I don't want to display all of ...
- 744
0
votes
0
answers
56
views
Chart.js CDN refusing to load
I'm trying to use Chart.js to load some components, but I don't know why I keep getting this error:
Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js' because ...
