Skip to main content
Filter by
Sorted by
Tagged with
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 ...
Lakshay Malhotra's user avatar
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 ...
Dikshit Patel's user avatar
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....
Sidrameshwar Biradar's user avatar
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 ...
Sebastiaan Mullens's user avatar
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 ...
C McNorgan's user avatar
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 ...
daniil sidorov's user avatar
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> &...
PBrockmann's user avatar
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. ...
Nishant Salode's user avatar
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 ...
imsunburnt's user avatar
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 ...
ddias's user avatar
  • 63
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 ...
Sas Ber's user avatar
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'), { ...
amir's user avatar
  • 67
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 ...
ALDI DAIM FAUZAN's user avatar
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 ...
Uriel's user avatar
  • 454
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 ...
Nishant Salode's user avatar
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-...
alextc's user avatar
  • 3,465
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 ...
MAQUIRANG MICHAELA KIM G's user avatar
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 ...
Skattch's user avatar
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 = ...
gifarz's user avatar
  • 3
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 ...
wasilikoslow's user avatar
  • 1,883
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 ...
Mi Hart's user avatar
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 ...
Shivshankar Prasad's user avatar
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,...
Samet Şahin's user avatar
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 ...
Link's user avatar
  • 1,671
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 ...
ChrisHusky's user avatar
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 ...
Rezo's user avatar
  • 33
-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 ...
Kris D. J.'s user avatar
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 ...
Marc Baeuerle's user avatar
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 ...
Dean MacGregor's user avatar
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 ...
Sam's user avatar
  • 348
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 ...
michele thefirst's user avatar
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....
miguel1981g's user avatar
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:...
Eiten's user avatar
  • 135
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,...
Leonardo Lima Ferreira's user avatar
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&...
Rejuan hossain's user avatar
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 ...
tukusejssirs's user avatar
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 ...
CAFxX's user avatar
  • 29.8k
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> ...
Zipity's user avatar
  • 33
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 ...
Razzo's user avatar
  • 59
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 ...
Pasha's user avatar
  • 1
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 ...
Mike's user avatar
  • 1
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) ...
helderneves91's user avatar
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 ...
bananajoey88's user avatar
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 ...
Virat27's user avatar
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 ...
JURE BAJC's user avatar
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 ...
Haezer89's user avatar
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&...
djlj's user avatar
  • 61
-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/...
Ashish Singh Rawat's user avatar
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 ...
Jackanap3s's user avatar
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 ...
fb24m's user avatar
  • 1

1
2 3 4 5
248