All Questions
Tagged with chart.js chartjs-2.6.0
229
questions
0
votes
0
answers
58
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
148
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
72
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
637
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
2
answers
475
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 ...
-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
221
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
203
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
549
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
643
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 ...
-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,441
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
323
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
626
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
537
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
576
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
112
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 ...
- 401
-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?
1
vote
1
answer
250
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
265
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
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
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
582
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
101
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
121
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 ...
0
votes
1
answer
2k
views
Line chart Change background color of shaded region on hover (Chartjs)
I've a line chart(chartJs) and i want to change the background colour of shaded region when hovered. I tried below :
const data = {
labels: ["Red", "Blue", "Yellow", &...
- 515
0
votes
1
answer
53
views
How to Update 2 dataset for 2 lines in a CharJS line graph?
var ctx = document.getElementById("canvas");
var Param1Data = {
label: "Param1",
yAxisID: 'A',
data: ...
- 17
1
vote
1
answer
344
views
Chart.js: chart not displayed from modules despite no errors - JS
In order to structure my code, I try to implement module.
I would like to create a class that would be able to create charts from ChartJs library.
Basically, I have three files
Index.html
<!DOCTYPE ...
- 1,074
0
votes
1
answer
243
views
Charting with chartjs, can't get it working correctly
I'm using [email protected]/dist/Chart.min.js.
I have an array (data) of objects that looks like this:
(4) […]
0: Object { Num: "5", "Label1": "6,342", "Label2": ...
0
votes
1
answer
550
views
Fill color to pointer in Chartjs
I'm using scatter graph. On hover over a point, the box representing the point color is not filled
I need to fill it with the color of the line instead of just the border being of the color.
Fiddle
...
- 3
1
vote
1
answer
2k
views
chartJS: How to return the closest x-axis label on click
I have a chartJS line graph, with x-axes labels being the last 72 hours on each hour mark ( for example: [8:00am, 9:00am, 10:00am,...]). Is there a way I can return the closest xAxis label on click? I ...
- 67
1
vote
1
answer
576
views
Can I add a callback function to the legend while keeping the original functionality?
I have a simple line graph made with chartjs with a legend. By default, when the user clicks the legend then it shows/hides the dataset that the user clicked. I have a callback function that I would ...
- 67
0
votes
1
answer
140
views
Using Objects in chartjs
the issue I have now is that I'm trying to use objects in the "data" field of my Chartjs script. This is my code below:
<canvas id="QGL_Chart"></canvas>
<script type="...
1
vote
0
answers
550
views
How to add padding/margin in bar in chartjs?
I want to ask how to add margin on a specific datasets/group-bar in chartjs? (like the picture below). Here is the chartjs-playground wherein I check my output.
Here is my current work:
scales: {
...
- 2,277
3
votes
3
answers
4k
views
How to add border in chartjs?
I'm trying to find out how to add border in chart area but it seems all I've been found is only applicable for datasets and the whole chart. Below code does not work.
Here is my code:
var myChart = ...
- 690