12,380
questions
1
vote
1
answer
21
views
Chart height is messing on creating new chart after destroying a canvas
During the creation of my chart initially it is rendering up perfectly like you can see below
but when i use my filter to get the dynamic datasets and render my chart, after destroying the initial ...
0
votes
1
answer
30
views
Issue with Dark and Light Mode in Chart.js using react-chartjs-2 with React, TypeScript, Vite, and Bootstrap
I'm working on a React project with TypeScript, Vite, and Bootstrap, and I'm using react-chartjs-2 and Chart.js to display a bar chart. The chart is displayed correctly, but I'm having trouble setting ...
1
vote
0
answers
48
views
Line chart rendering based on dynamic duration changes with suffixes
prTimeToMergeChartOptions : any = comboChartOptions;
prTimeToMergeChartsOptions(){
this.prTimeToMergeChartOptions.scales.x.title.text = "duration"
this.prTimeToMergeChartOptions....
0
votes
0
answers
42
views
Use Chart.js in a custom wordpress theme [closed]
I'm trying to use Chart.js in a custom made wordpress theme. I installed the package according to the step-by-step guide on the website of Chart.js. In my main theme folder I now have the folder ...
0
votes
0
answers
15
views
How to force scripted chart.js element color changes to persist, rather than immediately revert to default values
I am creating a bubble graph plotting each bubble as a separate dataset. An event handler displays additional information about each dataset when the corresponding point is clicked on. The display is ...
2
votes
2
answers
41
views
How to remove extra paddings on top and bottom of bar chart in ChartJS?
I have created a single line stacked horizontal bar chart with ChartJS v4.4.4. Additionally, I disabled the legend display, made the point radius equal to 0. I also added negative padding for layout ...
2
votes
1
answer
50
views
How to control the ticks labels major or minor?
I have not been able to control the labels from scales/x/ticks/major or minor.
Here is a simple code to illustrate the problem.
<!DOCTYPE html>
<html lang="en">
<head>
&...
0
votes
0
answers
48
views
Chartjs > Display tooltip on two charts when hovered over anyone of the chart
on Hover tooltip works for one chart at a time, it should display tooltip on both the charts. The second chart does displays active points but not the tooltip. The tooltip is a custom one used here.
...
0
votes
1
answer
24
views
Android WebView cannot render ChartJs bitmap on device but works in emulator
WebView does not create a bitmap when ChartJs is used in the webview. The resulting bitmap is all white. It does work on the emulator but not on an actual device.
UPDATE: I set hardwareAccelerated ...
1
vote
1
answer
67
views
Tooltip for a 2 dataset doughnut chart is being presented when mouse's rover is out of the dataset placement
I have a doughnut chart implemented with Chart.js 4.4.1. This chart has 2 datasets, one in an outside dataset doughnut, and the other one in the inside dataset doughnut.
Each dataset has his own ...
0
votes
1
answer
43
views
Chart JS Curved Labels in Polar Area
I am working on a web project using Chart.js to create a PolarArea chart that dynamically updates based on the selected class from a dropdown menu. I have encountered an issue where the labels are ...
1
vote
0
answers
42
views
How to add border to points in chartjs [closed]
I want to add border to points in chartjs, finally I want the dots to look like this:
Currently I've added these properties to dataset:
new Chart(document.getElementById('chart'), {
...
1
vote
0
answers
52
views
URL segment "undefined" when clicking on item in chart.js
I'm having trouble with Chart.js where clicking on a chart segment always redirects to an undefined value. I have a doughnut chart and want each segment to redirect to a specific URL based on the ...
0
votes
1
answer
32
views
Chart.js 3.9 and Vue: Unable to handle onClick event
Usually, StackOverflow is my last resort cause I don't enjoy being annoyed and I assume neither do you, but I'm desperate.
I want to capture a click on a graph Bar but I don't see a trace in the logs ...
0
votes
0
answers
44
views
Chartjs Nextjs - Both the Two charts should display crosshair if hovered on any one
Two line charts should display crosshair if hovered on any one. When first chart is hovered crosshair is displayed on the first but on second chart only points are highlighted without the crosshair
...
0
votes
1
answer
33
views
How to make the month label on x axis in the center of each segment and allow the first month to appear
I am trying to plot my data with Chart.js. The labels on the x-axis are Date object:
const labels = [
"1900-07-01T00:00:00.000Z",
"1900-07-02T00:00:00.000Z",
"1900-...
1
vote
0
answers
45
views
Line chart displays incomplete data when adding multiple datasets
I have an issue with my chart. When I only update the temperature, the graph will be okay. But when I add the humidity, the chart is only filling up halfway:
// Declare chart variables
let ...
0
votes
0
answers
24
views
ChartJs.Blazor: Error Could not find a chart with the given id
I have just installed ChartJs.Blazor.Forked (0.2.0) and defined a pie chart. I took the sample from GitHub and adjusted it so I could populate the chart with data from an async service.
The odd part ...
0
votes
0
answers
36
views
Put The Chartjs on Canvas using Nextjs
I have the problem when using chart on the image canvas, the issue is that the chart does not show/appear on the image canvas.
const drawCanvas = (canvasWidth, canvasHeight) => {
const dpr = ...
0
votes
1
answer
49
views
Combining multiple datasets in chartjs
Currently I have 2 points in my line chart's dataset as seen in the screenshot.
Now I want to add 4th dataset like in the screenshot, its the non-linear dataset.
But 4th non-linear dataset is a ...
0
votes
0
answers
35
views
Using chartjs 3.9.4 to draw dynamic chart on the same canvas ID
I am working on an Analysis part of my project and I have two buttons, which each button have different data by clicking them, and I want use jQuery to be loading data to the same canvas ID. This ...
0
votes
0
answers
23
views
how to create complex polar area chart [duplicate]
Refer this image I have a reference image that I want to recreate in my project, but I haven't found anything similar. The closest matches I found are Highcharts and D3.js charts. The chart I'm ...
1
vote
1
answer
37
views
Radar Chart Color Transition and Border Smoothing Issue
"I am trying to make smooth color transitions in graphics using Radar Chart. At the same time, I want the lines to be smooth, but I cannot get the results I want. The color transitions are smooth,...
2
votes
1
answer
52
views
ChartJS v4 - Using Points in a line chart will result in all x-values at 0
I am facing a rather strange problem with line charts and ChartJS. Given the following very simple code. I expect to have a line chart where 3 data points (at x: 0, x:1 and x: 2). But instead, all ...
0
votes
0
answers
61
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 ...
0
votes
2
answers
57
views
How to dynamically write Names on X Axis in ASP.NET MVC Chart.js
I am working on a project to create Bar charts where in X Axis we dynamically display the Agent Names and their respective Deal status.
So in bar chart we call the data from db and display the values ...
-1
votes
1
answer
99
views
How to create a chart with custom graphics? [closed]
I need to create a chart looking like the image above, but I have no idea how. The data needs to be dynamic and it would great to also include some animation when the chart is loaded.
My tech stack ...
1
vote
1
answer
43
views
Chart.js: Aligning multiple side-by-side bar charts with inconsistent label widths
I'm using Chart.js (4.4) to create multiple bar charts side by side, each representing a different country. My current implementation uses separate <canvas> elements for each chart. However, I'm ...
0
votes
1
answer
55
views
How to restrict the area of a react-rnd Rnd window that is draggable?
I put some ChartJS graphs in Rnd and it's mostly great but if I want to pan around in the graph, it also moves the window. Here's an example...
My current code is
<>
<Rnd
...
0
votes
0
answers
45
views
Chart Js - Doughnut chart - Setting data circumference to less than 180 degrees renders the chart off center?
I'm not sure if i have a fundamental misunderstanding of doughnut charts.
I'm looking to render a doughnut chart with 1 data point (we'll call this datapoint 'completed_A).
The full circumference of ...
0
votes
0
answers
23
views
chartjs create a custom mode
From chartjs documentation it's possibile to create a custom mode, defaults are: 'active',"show","resize","hide". It's not clear how to create a custom one and what ...
0
votes
0
answers
35
views
How to retrieve or export the numeric data from a Chart.js canvas object
I want to retrieve the numeric data from a canvas object created with Chart.js in a website.
The website is https://microwave-cablebuilder.gore.com/builder.html
When a cable configuration is typed, e....
2
votes
1
answer
67
views
Display value on each bar of the primefaces Bar Chart
Is it possible to show value on / in/ above each bars on Primefaces BarChartModel. I did not found this functionality. I use primefaces 13.0.0 i jsf application. I woul like to have somthing like this:...
1
vote
1
answer
63
views
ChartJS Bar chart - Modify legend
I am new to ChartJS and I am trying to build a bar graph. This graph should have the following information:
labels = ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10']
data = [1,2,3,4,5,6,...
0
votes
0
answers
51
views
Why do my line graph dashed grid lines disappear when I hover over graph point data?
My Chart.js line graph dashed border grid line vanishes for few few seconds when I hover over graph point data. This also happens when I activate and deactivate datasets using the "This Month&...
0
votes
0
answers
35
views
How to create horizontal stacked bar charts (sort of Gantt chart) multiple groups with line charts for each group in Chart.js?
Horizontal stacked bar charts with multiple groups
As for the horizontal stacked bar charts with multiple groups, I like this solution. It seems to work with [email protected] without any issues, so I’d ...
1
vote
1
answer
135
views
Hide overlapping labels based on smallest value (or other custom logic) in chartjs-plugin-datalabels
display: "auto" only hides overlapping labels based on the relative index; instead I need to hide, if 2 or more labels overlap, the label that has the smallest value.
I got this far, and it ...
0
votes
1
answer
28
views
Chart.js Zoom Limits Not Working: Infinite Scrolling Still Possible
I'm working on a larger project but have created a minimal "working" example here: https://jsfiddle.net/brLh2yk4/16/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
1
vote
1
answer
35
views
combo-bar-line with differest number of element
I would like to make a graphic design showing the trend of amounts.
Specifically a bar graph with the monthly delta and a graph with the cumulative total so far.
In my situation, the starting amount ...
0
votes
0
answers
30
views
How to use all the functions of Chart.js in a php controller
I'm transferring the graphic generation from js code to php, but functions such as borderRadius and legend => display = false don't work. I need borderRadius, because roundedBars does not ...
0
votes
0
answers
36
views
ChartJS Annotations on Horizontal Bar Chart
I am trying to get a Per Bar (or Stack) Line Annotation to show up on a horizontal Bar Chart. simply using the ChartJS documentation example, if you add, "indexAxis: 'y'" it breaks. Is it ...
0
votes
0
answers
73
views
chartjs 4 - ecg graph with 12 derivations, problems with the scale
I'm building a graph in chartjs to show ECG data. The data comes from PHP/Livewire, but, let's say that the data is an array.
For context a typical ECG comes in a grid representing 25mm/s (x = time) ...
0
votes
1
answer
75
views
React Chart.js is not rendering lines when state changes
I am using React Chart.js V2 and I am trying to update my chart when the state changes. However it is only rendering the y-labels on the left side and is not drawing the lines. The dataset and label ...
0
votes
1
answer
134
views
PrimeFaces chart changes between 12 and 14
I am trying to upgrade from PrimeFaces 12 to PrimeFaces 14. Chart data is deprecated in version 12, inside my bar chart model I am using chart data. Any suggestions with rewrite in this scenario.
I am ...
0
votes
1
answer
66
views
Using Webworkers for both parallel rendering and data generation in Chartjs
I am changing from Dygraph to Chartjs because of rendering webworkers and wish to fully multithread the graph to keep main thread empty as much as possible. I am trying to use Workers for handling ...
1
vote
0
answers
34
views
Add another data to ChartJS X-Axis in relation
I am trying to add another data to my chart.
I have to line which a representing a reference data. Now I want to add some points which are showing real results.
The chart should show that the points ...
0
votes
1
answer
118
views
How to show gridline at up?
I created show forecast of weather and I want to show gridlines (of temperature) at up. I tried something like this:
yAxes: [{
gridLines: {
display: true,
color: "gray&...
-1
votes
1
answer
48
views
How to render the coinbase API in stream line chartjs
Question: I am trying to render the level2 api in the chartjs. But unable to do it
I have kep the data in 2 variable bid, ask and trying to plot them against time.
code sandbox https://codesandbox.io/...
1
vote
0
answers
35
views
Odd behaviour when changing screens in Angular application
I have a dashboard page with visualisations where their height and width are set to be 100% of their container. When I shrink the page manually it works, but when I switch screens I have to refresh ...
0
votes
0
answers
40
views
How to create a chart with custom visible range selection?
I want to create a chart where date is an x-parameter, so that the user can choose from what date and to what date to view the chart, as is usually implemented on cryptocurrency-related sites (I will ...