280 questions
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&...
- 11
0
votes
0
answers
62
views
Render Image update when I click legend chartjs
In ChartJs I want to custamize the bar chart.I'm placed the images in empty places if i click on the legend that images cannot be hide. I made a attendance bar chart if person is absent that place ...
0
votes
0
answers
47
views
How to add total count in centre of the doughnut chart and bottom left and right value using Chart.js? [duplicate]
HTML
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
Jquery
<script>
const cValues = ["Candidate quotas", "Reserved seats&...
0
votes
0
answers
24
views
Changing neutral value from 0 to different number. | reract-chartjs-2
I´m trying to implement a Bar Chart with react-chartjs-2 in a web app.
It is possible to make a graph where values above zero head up and values below zero head down.
So far so good. But now i need to ...
3
votes
2
answers
162
views
How can I place horizontal gridlines above bars with Chart.js?
I have a Chart.js the output looks like the first image, I would like it to look like the second image where the y-axis line will "cross" the bar and space it out a bit for better visibility,...
- 169
1
vote
1
answer
80
views
chartjs: unable to create Stacked Chart
I feel stupid but I don't understand where I'm going wrong :(
I'm trying to build a stacked bar chart through chartjs but I obtain only a chart with grouped labels:
const ctx = document....
- 1,118
1
vote
1
answer
668
views
Chartjs color the background of chart after specific values with dark grey color
I am new to ChartJS and due to server constraints I am using ChartJS 2.9.4 using cdnjs and I want to color the background of line chart from
60-80 ==> light grey with background text in right side ...
- 21
0
votes
1
answer
65
views
How can I fix the issue where the column values on my Chart JS chart are displayed in the wrong place?
I wrote a telegram bot on NodeJS that shows a bar graph of sales on request.
The first graph shows the correct arrangement of column values. The second one is incorrect. The correct graph appears ...
-1
votes
1
answer
102
views
how to manage gap for same categoryType in react-chart js 2
import React from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from "chart.js";
import { Bar } from "...
- 47
0
votes
2
answers
482
views
Show dynamic horizontal bar chart in Thymeleaf for each
This is a continuation of [this][1] question so right now I can get the data and it displays how many rounds a user has played and all their scores but as for the horizontal bar chart it only displays ...
0
votes
1
answer
668
views
Stacked Bars with different colors
I was looking at the stacked bars for chart js (https://www.chartjs.org/docs/latest/samples/bar/stacked.html)
They seem to be pretty much automatically stack bars together, which is not exactly what i ...
- 48.5k
-4
votes
1
answer
6k
views
How can I reduce the size of doughnut chart and fixed the doughnut size
I have a doughnut chart built using chart js. I want a fixed-size of doughnut chart no matter how much data it has. check the image how bad it is looking It has 371 legends. How can I fix the size of ...
0
votes
1
answer
223
views
Use same chart across multiple canvas
How can I use the same chart to be rendered across multiple canvas. I want to create one ChartJs object and assign it to multiple canvas.
- 192
1
vote
1
answer
35
views
Horizontal line for bar chart
Information:
Chart.js v3.8.2
https://www.chartjs.org
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
...
- 21
1
vote
1
answer
204
views
How can I assign green for an uptrend in line chart in chart-js and red for a downtrend in chart-js?
I want to assign green for an uptrend in line chart in chart-js and red for a downtrend in chart-js. I am relatively new to chartjs and I am not sure how to access the data elements to spot an uptrend ...
- 133
1
vote
1
answer
1k
views
Is there anyway to overlap one barchart with another in chart js without stacking them?
I tried using the stack and offset but it does not seem to work
This is my code:
import React, {
useEffect
} from 'react';
import {
Bar
} from 'react-chartjs-2';
import useWindowWidth from 'wa-...
1
vote
1
answer
2k
views
Display all labels on X axis in Chart.js regardless of whether there is data or not
I am new to Chart.js , I have been looking for a way to display all labels in chart.js regardless of whether there is a data for the label or not, I have tried the max and min but it does not work so ...
- 200
0
votes
1
answer
570
views
label on the x-axis does not show completely in Chart.js
I have a data from the backend(flask-sqlalchemy with mysql) in which data contains date in integer for week, month and year that looks like this:
in this case the x represents the week of the year:
...
1
vote
1
answer
1k
views
How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
I have a boxplot component in my Vue project and I want to reuse it on the same page for a table I am building.
However, despite the fact that my data is different, I still get this Canvas is already ...
- 891
5
votes
3
answers
666
views
Chart js showing squares
I am using the npm module chartjs-node-canvas to create the chart and add it to my xlsx file .
I am getting the wanted result without running my app as a dokcer container .
Here the result got after ...
2
votes
0
answers
434
views
Custom legend labels react-chartjs-2
I look all over the chartjs documentation and StackOverflow issues but can't find an example of how to custom legend labels in react-chartjs-2.
I want to switch the default labels to checkboxes like ...
- 41
-1
votes
2
answers
1k
views
generate multiple charts via loop for chart js
I am trying to only have table tag, but have js generate the entire table. So I use createElement for headers, but within tbody.innerHTML, I am string concatenating string interpolated html that ...
1
vote
1
answer
1k
views
ChartJS Horizontal bars barely visible with 50 records on the Y axis
Is there a way to set the vertical thickness of the horizontal bars in ChartJS(3.7.0). Or change the zoom level or something?
I have a recordset with 50 rows which should show 50 horizontal bars. ...
- 2,465
1
vote
1
answer
1k
views
Chart.js Treemap Adding custom text to each rectangle
I am using chart.js to develop a TreeMap. It works great but the issue is each rectangle only shows the value of the data. I want to add some custom text next to the value. How do I achieve this?
var ...
- 63
2
votes
1
answer
2k
views
zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs
How to change the width and the color of the x-axis (horizontal axis) in Chartjs? It seems to work using zeroLineColor and zeroLineWidth for the y-axis (vertical one), but it does not work for the x-...
1
vote
1
answer
327
views
How can I make small grid lines above ChartJS labels?
I am using Chart.js to draw a simple line chart.
How can I make small grid lines on top of the xAxis labels?
The documentation for Line Chart is here: https://www.chartjs.org/docs/2.7.3/getting-...
- 35
2
votes
1
answer
3k
views
getting chartsjs to show key of data label instead of value
I am having trouble with my chartsjs labels.
my graph generates fine, I am trying to set the chart so that the data labels are for the text part of the data and not the numbers part. my code shows the ...
- 217
0
votes
1
answer
631
views
Chart JS: Old chart data not clearing
I'm trying to update Chart JS data entirely but the old data label on the x-axis not resetting. Is there anything wrong with my code?
let netProfitData = @this.netProfitData;
netProfitChart....
0
votes
1
answer
547
views
Chart JS Replace All Dataset Data
I want to replace my chart data entirely with a new array of objects. The chart data was replaced by new data but the chart is not updating after I called mychart.update(). Is there any way to replace ...
1
vote
1
answer
577
views
each section of a pie chart to a random color in chartsjs
I am using chartsJS to show a pie chart.
I each time the page refreshes the chart will have a different number of sections.
I am trying to set each section to a random color.
I ac create a random ...
- 217
1
vote
1
answer
2k
views
ChartJS tooltip scrollbar to prevent data overflow?
I am working with a chartJS where I have callback function to display data in tooltip. As data increase overflow section of Tooltip is hidden from canvas. Is there a way to prevent overflow of tooltip ...
- 247
1
vote
2
answers
115
views
How could I put a string for the points on the x-axis?
I am using ChartJS v.2, and I would like to label arrayX by a string that will appear when the mouse will be on hover displaying the coordinates.
ArrayX being points (numbers) I should label with ...
- 411
0
votes
1
answer
1k
views
React Chartjs is not showing any output
React
As you can see JSX code for Bar Chart, suppose to show a bar chart with data values. But it doesn't show any output or error as well
JSX
import React from 'react'
import { Bar } from 'react-...
-1
votes
2
answers
2k
views
How do I prevent my chart from rerendering? (ReactJS) [closed]
So everytime I use setState my component rerenders. But I don't want my chart to rerender. My question is how do I prevent my chart from rerendering?
0
votes
2
answers
397
views
Display chart in vuejs?
I am making graphs using vuejs, get data through laravel API.
data() {
return {
startDate: '',
endDate: '',
data: {
labels: [1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, ...
- 273
1
vote
1
answer
251
views
ChartJs how can I move bar into new group?
this one has been annoying me for too long now, ha.
So I just want to manually control the group bars, the blue one below should be under Checkout 2.
Any help much appreciated.
var data = [
{
...
- 153
0
votes
1
answer
268
views
ChartJS multichart graph not showing correctly legends
Am trying to create bar graph with multiple plots using chartjs and the graph is generated successfully but one of the legend is not showing correctly.
Am using Chartjs 2.9.3 version.
One of the bar ...
- 1
0
votes
1
answer
2k
views
Vue-Charts label numbers to the side of a bar chart
I am using a Nuxt application with vue-charts. I have a barchart that I trying to see if there is a way to callback the numbers next to the chart. Some what like this
My barchart options look ...
- 577
2
votes
1
answer
3k
views
How to change React chartjs-2 legend click functionality to hide all except the one clicked?
React Chartjs-2 : How can I implement the functionality where when a legend is clicked, instead of hiding the clicked legend, all other legends/datasets get hidden?
- 227
1
vote
0
answers
2k
views
How to style the axis label for a bar chart using React-chartjs-2
bar-chart
I have to make a bar chart like in the photo above which has rounded corners with a linear gradient background and the x-axis label should also have a background and rounded corners using ...
-1
votes
1
answer
1k
views
Charts.js : How to remove the Vertical Black lines in Bar Chart
How can I remove the vertical black lines, which are getting displayed both sides of bars in the bar chart?
I tried both
options : {
scaleShowVerticalLines: false
}
options : {
scales : {
...
- 11
0
votes
1
answer
1k
views
Multiline Chartjs causes issue multiple lines with same data cannot be differentiated
I am displaying a multiline chart using Chartjs.
Many lines here hold same data hence im not able to differentiate them. even if i keep different color for different line i cant see any difference ...
1
vote
2
answers
1k
views
Chart.js Console JS Error while destroy the Chart on click event
on Bar click event of first chart "config.categoriesChart" gets the console error "chart.js:10403 Uncaught TypeError: Cannot read property 'handleEvent' of undefined"
enter ...
- 11
1
vote
2
answers
4k
views
Chart.js - disable tooltip when cursor moves outside the main canvas
I have a line chart and I set up my tooltip like this
options: {
tooltips:{
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, ...
- 309
1
vote
1
answer
3k
views
Chart.js - add 1 more tick step to an axis
I am drawing a bubble plot with Chart.js. Sometimes the big bubbles happen to be near the edge of the plot and get truncated. Therefore I've tried to extend the axis limit beyond the data range. The ...
- 309
0
votes
0
answers
595
views
Chart Js - Bar Chart- How to make the first line of Label BOLD?
var horizontalBarChart = new Chart(horizontalBarChartCanvas, {
type: 'horizontalBar',
data: {
labels: [["Company Brand A", "Brand A"], "...
0
votes
1
answer
3k
views
Something similar to grace available in the latest chartJs for ChartJs 2.9.3
I had used ng2-charts in my angular project for generating charts. It has a dependency on ChartJs2.9.3.
In the project, I have used a common ChartOptions for multiple chartsthat are generated ...
- 1,524
0
votes
0
answers
104
views
Using Chart.js, How can I create a bar chart for several sets of data
I am trying to create an advanced bar chart using chart.js. I would like my chart to have 3 sets of 3 bars. Each set examines data over a different time interval (7 days, 14 days, 30 days). I have ...
0
votes
1
answer
2k
views
Chartjs Timestamp to Datetime labels
I'm using a timestamp format to create my scatter chart (datetime won't work for scatter). I need help changing the labels in the X axis from timestamp to datetime so that it's readable by users. Just ...
- 11
0
votes
0
answers
124
views
How hooks (plugins) and different phases in chart.js works?
I read the documentation for chart.js plugins & about different phases like render,init,update available here that occurs while chart appears on browser.
But yet it is not clear for me how these ...
