Skip to main content
Filter by
Sorted by
Tagged with
0 votes
1 answer
35 views

chart.js line segment coloring

in chart js (4.4.8) i want to give discrete line colors based on a baseline and threshold value of the data point. when i give line segment colors it appies color to whole line segment and looks ...
nkd's user avatar
  • 13
-1 votes
0 answers
22 views

chart.js stacked bar with dynamic values ​and long data labels with a line below the text [closed]

I need to get the value from the previous page url parameter to calculate and display the value in the dynamic chart. It can make a vertical stacked bar chart like the image below. And I want every ...
GuyKittithat's user avatar
0 votes
1 answer
22 views

Using chart.js with a background image plugin, can't get entire image to show

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here. I'm using the plugin, instead of a CSS background, because I need the image to stay with the chart ...
jamminjames's user avatar
0 votes
1 answer
24 views

Chartjs: Connect canvas background image and chart (type: 'scatter') so that data points remain in same spot on image?

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here. It is better at staying in place than a css background image, however, when the window is resized, the ...
jamminjames's user avatar
0 votes
0 answers
26 views

Is there a solution to Chart.js improperly outputting pie/doughnut charts?

I am making a website which is predominantly for data visualisation, data is selected by the user (who also selects a chart type) and returned with PHP and I'm using Chart.js on the client side to ...
elijah's user avatar
  • 1
0 votes
0 answers
15 views

How can I make my custom plugin execute before the Tooltip plugin?

I have written a custom plugin for ChartJS v4 in my application, and I am instantiating it in my chart instance like this: new Chart(myCanvas, { plugins: [ new MyPlugin(...) ], //...
Master_T's user avatar
  • 8,041
1 vote
0 answers
19 views

Implementing oscilloscope cursor measurements for chartjs [closed]

I'm interested in implementing "cursor measurements" like you find with oscilloscopes in chartsjs. Oscilloscope cursors allow you to select two data points and it will then show you the ...
ErikR's user avatar
  • 52.1k
0 votes
1 answer
23 views

Controlling tick marks and lines in chart.js time scatter plot

Concerning this jsfiddle which uses chartjs v3.9.1 and the date-fns adapter: https://jsfiddle.net/0a6c1ty5/22/ I'm trying to format the tick labels in the function tick_label but I'm only getting a ...
ErikR's user avatar
  • 52.1k
0 votes
0 answers
32 views

Chart.js tooltips not showing when zooming out unless maintainAspectRatio: true, but it breaks chart layout

I'm using latest Chart.js 4.4.8 to render a line chart inside a flex container. The tooltips work fine initially, but when I zoom out in the browser, some tooltips stop appearing. The more I zoom out, ...
Hamza Anwar's user avatar
1 vote
0 answers
37 views

How to add Image and text in data label and legend in pie chart?

I have created SPFx React project and integrate chart js library in that projecct I have used "chart.js": "^3.3.2" version. I need to add an image/icon in data labels and legends. ...
Bhoomesh Joshi's user avatar
1 vote
1 answer
45 views

Display Chart.js chart(s) depending on Livewire form submission

I am trying to display one or more charts using Chart.js and Laravel Livewire. My issue is that the chart isn't displayed, even if the chart object receive data (when I console.log(chart) I can see ...
Fluktegrute's user avatar
1 vote
2 answers
41 views

ChartJS to show image on y-axis

This is part of chart code. I am trying to show the image on the yaxis. My first problem is that the img.onload does not hit because It does not set the width and height. 2nd it just show [Object ...
Muhammad Nadeem's user avatar
0 votes
0 answers
35 views

Django with chartjs > 2.9.3

I'm using version Django==5.0.6 and attempting in integrate charts using chartjs and plugin datalabels. When I use the charts render without issue, but I'm not able to see any datalabels. If I try to ...
Lisa Higgins's user avatar
-2 votes
0 answers
18 views

Stacked bar chart using Chart.JS [closed]

I have an issue while setting the dataset in a stacked bar chart. The issue is that there are some values which is larger and some smaller, so we can't able to handle it. ChartJS URL: https://www....
Ayaz Lunat's user avatar
0 votes
2 answers
58 views

Charts.js tooltip position not working properly on Zoom In

I have created a React Application.I was working on dasboard page, in which i have used chart.js for displaying data in Barchart,Pie Chart.All things was working fine,but when i try to zoom in the ...
Prince's user avatar
  • 1
0 votes
0 answers
54 views

Chart.js streaming showing time (HH:MM:SS - 24 hour clock) on xAxis

I have seen a very similar question already, that concerns chart.js, but I am using the chart.js streaming plugin(https://nagix.github.io/chartjs-plugin-streaming/latest/). Therefore my code looks ...
Mo711's user avatar
  • 637
2 votes
1 answer
41 views

Make a parallelogram from the line graph

I'm using vanilla JS with Chart.js. I want to make this line graph into something parallelogram. Currently looks like this Want something like this And my code is this: var chart = function () { ...
Paul Jolou's user avatar
1 vote
2 answers
53 views

Creating a Bar Graph to compare two values (graph doesn't always start at zero)

I have already entered the code to make the bar graph start at zero, although whenever my numInput.value becomes less than totalEmissions, the graph for some reason starts at numInput.value, rendering ...
Tuxedp's user avatar
  • 11
1 vote
1 answer
39 views

Is it possible to make the tooltip scrollable in Chartjs, react?

I want to make a scrollable tooltip in Chartjs because I have a lot of data to show. I have made an external HTML tooltip referencing the official document, but I am not sure how to make it scrollable....
Ji Yeon Kim's user avatar
3 votes
1 answer
47 views

Chart.JS - Remove only the second vertical line

I have a very simple Chart.JS line graph. I have setup everything, but the designer wants to remove the first and the last x lines and needs the labels at the center of the chart. I have tried several ...
Kareem Sultan's user avatar
0 votes
1 answer
56 views

Remove Spacing from the bars for Q1 and Q2 I am using chartjs version 2.7.2 and angular chart js version 1

In your Chart.js bar chart, experiencing unwanted spacing between the labels Q1 and Q2 when the corresponding data values are 0. Even though the bars with 0 values are not visually displayed, Chart....
ronaldino's user avatar
  • 103
0 votes
1 answer
52 views

How to modify the legend of Bar Chart [closed]

I am using chartjs with react import { Chart,Line,Bar,Pie } from 'react-chartjs-2'; var data = { options: { legend: { position : 'right', }, title:{ ...
whitebear's user avatar
  • 12.5k
0 votes
0 answers
48 views

Migration to Angular v17 with ng2 charts v2

I'm working on migration of Angular 14 project to Angular 17. One of the main obstacles is that the app has some ng2 charts that are version 2 which is not compatible with newer versions of Angular. ...
Gosia's user avatar
  • 7
1 vote
1 answer
77 views

How can I change the color of the grid in this chart using Chart.js

Im trying to change the color of the grid lines since my background is dark. I have managed to change the color of the ticks, and the line itself. However I've been trying to change the grid color for ...
eliastuzo1998's user avatar
0 votes
1 answer
57 views

Line chart(ChartJs) with huge set of nested data, is freezing the screen. How to optimize it?

I'm building a line chart, where the line color and the background will change based on different conditions. As line chart in chartjs dosen't support multi background color. So I nested the data from ...
manas kumar's user avatar
1 vote
1 answer
35 views

How to optimize chart rendering using Chart.js in Ionic?

I'm building an expense manager application where I have a stats tab containing two subtabs, expenses and incomes each of which has its own chart instance. Rendering is first slow, it takes some ...
georgio bou sleimen's user avatar
0 votes
0 answers
42 views

How to make the distance between the bottom label and the bottom the same as between the other labels

In Chart.js, how to make the distance between the bottom label and the bottom the same as between the other labels. The first picture is what I have, the second is how it should be. const chartOptions ...
Vlad's user avatar
  • 11
0 votes
1 answer
44 views

Min. height for stacked bar chartjs

I've a vertically stacked bar chart in chart.js. Since the bars are being generated based on some userinput, it's possible that I get a chart that would look something like this: I want to enforce a ...
Torbi's user avatar
  • 3
1 vote
1 answer
43 views

How to listen to chartjs-plugin-zoom's events in another Chart.js plugin

I'm writing a custom plugin for Chart.js 4 and I want my plugin to behave well with the chartjs-plugin-zoom plugin. In order to do this, I need to listen to the chartjs-plugin-zoom events (onZoomStart,...
Master_T's user avatar
  • 8,041
1 vote
1 answer
61 views

How to restrict category type axis in chart.js to bottom of graph?

I use the R1, R2 and R3 labels in the bottom left corner to track the on-off state of some properties. I want them to be on the bottom of the graph just like they are here, but the way I solved this ...
matthias_buehlmann's user avatar
2 votes
1 answer
59 views

chartjs 4.4 : not able to plot 2 time series in 1 graph

I have an issue with plotting 2 lines in 1 graph using chartjs: I get 2 graphs with 1 line in stead of 1 graph with 2 lines, and I think I made a very simpe error, but I can't find it. I have spend ...
TheGlasses's user avatar
0 votes
1 answer
62 views

EvoPdf not rendering chart from chart.js

I am using EvoPdf version 7.5. We have this html that has been used to generate a pdf report for quite some time with no issues, but its just straight up HTML and css, there was not javascript being ...
Ian's user avatar
  • 11
1 vote
1 answer
54 views

How to center the labels of a horizontal stacked bar chart in Chart.js?

I have created an horizontal stacked bar chart using Chart.js and Chartjs-plugin-datalabel. Here are the options I defined for the chart : { indexAxis: "y", animation: false, ...
Glim's user avatar
  • 113
0 votes
1 answer
67 views

ChartJS realtime waveform getting mixed up when chrome tab swtiched back and forth

Am having a simple application that constantly gets waveform data and displayed in my browser (chrome), chart.js mode is set to realtime. It works well when the chrome browser tab stays on, even when ...
Sathish Kumar's user avatar
1 vote
1 answer
58 views

Chart.js, show tooltip even if there is no data available for the label

Image here Currently using chart.js plus a custom tooltip that's worked great so far, but a new use case is to now show the tooltip even when there is no data. (See the image attached). In this case, ...
Michel Schoemaker's user avatar
0 votes
1 answer
58 views

Creating a line chart with a JSON file in Chart.js [closed]

I'm looking for someone who can help me coding/creating a (automatically updating) line chart with data from a online JSON file. The JSON file I want to use contains different kinds of data. But I ...
Wesley Hogervorst's user avatar
0 votes
0 answers
62 views

Issue with Y-Axis Ticks in Chart.js (v4.4.7)

I'm working on a project using Chart.js version 4.4.7, and I'm encountering an issue with the y-axis ticks. I want to replace numeric tick values (like 20, 40, 60, 80) with custom labels (e.g., "...
user29504333's user avatar
0 votes
1 answer
48 views

Not able to make the bars in horizontal chart center in chart.js

I tried all the options but the end bars are close to the border and other bars are not center. I tried using all the options for the horizontal chart from chart.js documentation but the bars are not ...
Shanjay Nithin's user avatar
0 votes
0 answers
56 views

How to make custom vue-chart.js plugins reactive

Im working with vue chart.js and wanted to create a gauge chart. I was able to create it successfully, but im having a hard time to make the data im using in my custom plugins to be reactive (For ...
IsaiahM's user avatar
  • 13
1 vote
2 answers
36 views

Line annotation not updating position although update() called

My line annotation is not changing its position although i'm rerendering the chart. I can't figure out how to update the annotation line dynamically. videolist.component.html <c-card-body> &...
Sithys's user avatar
  • 3,803
1 vote
0 answers
67 views

Chart.js - Invalid scale configuration

Below is the code snippet for scale configuration, which shows error on browser console. The Error shown in console as: "Invalid scale configuration for scale: x" Moreover, if I remove [ ] ...
djay's user avatar
  • 23
1 vote
1 answer
83 views

How to make datasets' line always appear on top of other datasets' background on a line chart in ChartJS?

I have a line chart with 2 datasets that overlap. Each dataset has background and a line color. I want to make all datasets lines (borders) appear on top of all backgrounds. And making the background ...
FieryRider's user avatar
1 vote
1 answer
46 views

Vertical stack bar displays zeroes / "invisible" values with Chart.js

I'm trying to make a vertical stack bar plot with Chart.js. It works pretty well but for some labels (i.e., for one vertical part of the graph) I don't necessarily have strictly positive values for ...
FluidMechanics Potential Flows's user avatar
0 votes
0 answers
51 views

vue-chartjs "Module not found: Error: Package path ./dist/Chart.js is not exported from package"

I'm trying to use vue-chartjs but I'm having issues with the dependent chart.js installation. Error: ERROR in ./node_modules/vue-chartjs/dist/index.js 1:0-190 Module not found: Error: Package path ./...
Gerrit's user avatar
  • 1
1 vote
1 answer
76 views

How do we add labels like the image?

I have created the SPFx React project. I have implemented a bar chart using PrimeReact charts. To my knowledge, PrimeReact uses the ChartJs library on the back end. I need to add a label and value ...
thedeepponkiya's user avatar
1 vote
1 answer
68 views

Stacked bar chart with multiple bars of the same type in each stack

I'm trying to recreate the top graph in chartjs. The one at the bottom is my attempt using a bar chart in chartjs. I don't know how I can add multiple good and bad bars on each row. Furthermore, each ...
shammy12's user avatar
1 vote
1 answer
53 views

How to align stacked bar chart label to the left and have it ellipse if the text is too long

I have a Chartjs stacked bar chart where I want to have the data label aligned to the left, and elapsed (...) if the text is too long. My chart is set up as follows. this.chartData = { labels: ...
peterc's user avatar
  • 7,883
1 vote
0 answers
93 views

How to show total sum on top of each bar in bar chart in addition to labels within bars [duplicate]

Goal: Each bar should have a total sum on top of the bar. For instance, Bike's total sum is 33. Problem: Is it possible to do it in this chartjs? Other: https://jsbin.com/leduqarini/edit?html,output ...
HelloWorld1's user avatar
  • 14.1k
0 votes
0 answers
34 views

Show total sum of each stack bar

Goal: Each bar should have a total sum on top of the bar. For instance, Bike's total sum is 23. Problem: Is it possible to do it in this chartjs? Other: https://jsbin.com/leduqarini/edit?html,output ...
HelloWorld1's user avatar
  • 14.1k
1 vote
1 answer
111 views

Show value data in the bar

Goal: Show the chart with visual data with numbers in each box. Problem: Is it possible to do it in this chartjs? https://www.geeksforgeeks.org/how-to-dynamically-update-values-of-a-chart-in-chartjs/ ...
HelloWorld1's user avatar
  • 14.1k

1
2 3 4 5
248