All Questions
338
questions
0
votes
1
answer
127
views
How to set filter date on the chart.js with useState?
I want to set filter date on my chart and introduce the date buttons by a component named <ButtonDate />. I've decided that it's better to use useState to set change on the button and chart. I ...
- 1
1
vote
0
answers
77
views
Datalabels of Chart JS Not Displaying Correct
I am working with simple HTML and chart js, I am putting labels inside the chart with a backgrounds and borders.
However the position of the labels and their background not correct.
these are my ...
1
vote
1
answer
93
views
Chart.js: Uncaught TypeError: yScale is undefined when having multiple axes
Chart.js version: 2.9.4
I have a function that renders a chart based on inputData coming from PHP, displaying multiple axes, based on the sensorType (always maximum of two axes):
function renderChart(...
- 23
0
votes
1
answer
142
views
How to increase the line width when hovering the cursor in chart.js?
I know that I can change the width of the line and its points with borderWidth: 1, pointRadius: 1, it works fine.
But how to increase the width of the line and its points when hovering the mouse ...
- 175
2
votes
0
answers
303
views
Chart.js Treemap plugin showing coordinate data in chart image rendered
I am creating a treemap using the plugin, and it is working fine except for the context.raw data being printed in the svg of rendered Chart.
Note that i have used single field so problem is easily ...
- 21
0
votes
2
answers
725
views
How can I adjust the width between 2 specific columns of bar chart of Chart.js?
How can I adjust the width between 2 specific columns of the bar chart of Chart.js?
I want to distance certain 2 columns.
0
votes
1
answer
222
views
How to create a combination of stacked and grouped bar chart with chartjs?
i want to create a bar chart that would look like below:
i tried creating a stacked bar chart with the documentation given on the website. https://www.chartjs.org/docs/latest/samples/bar/stacked.html
...
- 262
1
vote
1
answer
265
views
How to correctly create a straight line in chart.js with mixed type?
Help me find my mistake.
I use chart.js 2.7.0. I have a bar chart and want to add two lines. One of them should be straight
via all chart. I tried two ways, but it didn't help me.
In the first way, I ...
- 55
0
votes
0
answers
175
views
scale to fit/fill image as pointStyle in chartjs
is there a way to scale image to fit/fill in chartjs, image as pointStyle on chart, we can load an image but cant set it as fill or fit, we can only provide width, height to that image.
we can use ...
- 33
1
vote
0
answers
204
views
Chart.js xAxis bottom label alignment
My chart.js bottom label looses it center alignment when I line break it into two lines
and when my labels are rotated to 90 degrees
MY Xaxis code
xAxes: [{
display: true,
...
- 259
0
votes
1
answer
1k
views
How to use 2 different versions of chart.js in same html source tag
I've plots build with 2 different versions of chart.js. one is with 3.8.0 & other is with 2.8.0. So, I'm including both the versions in tags like this.
<script src="https://cdn.jsdelivr....
user17993062
1
vote
1
answer
2k
views
Changing legend text in chart js causing issues
I'm trying to shorten my chart legends, so I'm using the beforeRender plugin to change the text of the legend. However, once the chart is drawn, it seems to keep the original label size (see below ...
- 58.3k
1
vote
1
answer
3k
views
How can I draw a horizontal reference line in chart.js?
I want to draw a horizontal reference line at a particular value.
The data is of the format:
{
"Close": 15638.8,
"Date": "2022-06-21T10:00:00.000Z",
&...
- 133
0
votes
1
answer
562
views
Can't view multiple bars on the x axis - vue-chart
I'm trying to get a stacked bar chart with two bars sharing a label next to each other on the x-axis but I'm having issues with getting the 2nd bar to display - currently it sits underneath the first ...
- 58.3k
0
votes
2
answers
109
views
chart.js - How draw x and y axes lines on the left and bottom
I use chart.js v2 library to draw a chart.
I tried to set a zero line but it's not working.
I need to draw two lines like on the screenshot below. Is it possible to draw with some cinfiguration ...
- 511
1
vote
0
answers
438
views
How to draw comparison of two mixed bar charts in chart.js?
So, i have this graphic by chart.js: http://jsfiddle.net/wdxk1nsb/1/
there is no problems, but now i want to compare this bars like this: http://jsfiddle.net/kyo3bqzh/
or here:
var data = {
...
- 11
3
votes
1
answer
7k
views
How to increase space between label and chart area?
All my labels are on the top of the bars. I can see this:
but I want that would be like this:
Padding doesn't work for xAxes but works for yAxes.
legend: {display: false},
scales: {
...
- 55
4
votes
1
answer
872
views
Treemap chart.js text wrap
In my code below, I am able to draw a Treemap and also display the tag in each tree cell. But the text is overflowing the tile if it's a long word
I need to ensure the word stays in the tile even If ...
- 63
1
vote
1
answer
1k
views
Chart.js Treemap Custom text
In my code below, I am able to draw a Treemap and also display the tag in each tree cell. But I want to add some custom text next to my tag,
Like say I want the word 'Language' to appear in each tree ...
- 63
1
vote
0
answers
315
views
Legend does not appear while using chart.js in react
I am creating a sales chart by year using react chart.js.
When the year button is clicked, the corresponding year data is brought from the server and the chart data is updated.
However, the legend in ...
- 11
2
votes
2
answers
451
views
How to have mutiple charts in a single page using Chart.js?
I tried to draw more than two charts with Chart.js on the same page and created a dynamic div in a loop with all the data for the chart like this:
<div class="col-4">
<canvas ...
2
votes
1
answer
746
views
ChartJS 2 How to globally remove xAxis gridLines?
I'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed.
I have achieved this functionality by adding this to my Line graph config;
...
- 761
0
votes
0
answers
194
views
Two different spacing distances between grid lines in Chart.js
Is it possible to do something like this using Chart.js
I searched for an example on the internet but could not find it. I need to show 3 lines on the graph because I want to. Two lines range from 0 ...
- 703
4
votes
3
answers
6k
views
Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12
I have created angular 12 application and trying to include barchart with my application using 'ng2-charts and chart.js'
I have imported NgChartsModule in both app.module.js and my component.module.js ...
- 81
1
vote
0
answers
108
views
Uneven / Custom-Positioned Axis Labels in Chart.JS
I'm trying to migrate an existing library for generating scatter plots from Python to Chart.js that look like this:
But I'm struggling with how to create the X-Axis labels at such uneven horizontal ...
- 305
0
votes
1
answer
1k
views
Line chart plotting multiple points for duplicate data on x and y axis using chart.js
i am a beginner working on angular8 application and using chart.js version ^2.9.3, i created a chart based on the below data.
Code Sample for creating Line chart with the data i have:
const labels ...
- 43
0
votes
1
answer
1k
views
Chart js cut the title and the legends
I wrote a chart.js graphic code setting the title and axis X and Y legends. When I changed the version, the both dissapear in the graphic. Does anyone have the same problem?
I'm using chat.js min.js ...
- 1,109
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
votes
2
answers
515
views
Implement a cash flow timeline [closed]
I'm trying to implement a timeline for cash inflow and outflow like this:
I cannot figure out if there is any chart type which might help. Is it possible to implement such a chart?
- 7,819
1
vote
1
answer
143
views
Chart.js the point's limit supported
I have a vetor with 50.850 points to plot in the line graph type. I'm using chart.js to show all this points in the graph, but it does not plot. Does anyone know the point's limit the chart.js can ...
- 1,109
1
vote
1
answer
3k
views
How can I get chart.js to automatically add colours for dynamic labels?
I'm currently trying to get chart.js 2.0 to automatically generate new colours for dynamic labels. the use case is I'm making a pie chart using data from a database where each row is a new label and ...
- 80
0
votes
1
answer
230
views
How to fill background colors on line-charts?
I'm migrating some plots from Plot.ly to Chart.js v2.9, and I'm trying to add background colors to my new Chart.js plots to match their predecessor:
But when I add the appropriate plugin to my Chart....
- 305
1
vote
1
answer
1k
views
Chart.js manipulate each bar in chart with different labels
does anyone know if this is possible? Basically I want the chart to have labels for example [Jan, Feb, March] and I want to be able to toggle these values on and off. Seems like such a simple thing ...
- 13
1
vote
1
answer
404
views
Chart.js: Don't stretch axes beyond chart
I'm using chart.js 2.9.4 and the ng2-charts wrapper for Angular. I'm trying to display incoming live data, but have trouble configuring the chart so that the ticks/axis don't stretch beyond the data ...
- 161
0
votes
1
answer
988
views
How to use below syntax in chart.js 3.x?
How to use below syntax in chart.js version 3?
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(...
- 9
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
135
views
Chartjs xaxes tick min
I am trying to continue the chart in the future, even though there are is no data for those specific dates. I have created an example: https://jsfiddle.net/r28wa54q/1/.
I have placed the minimum value ...
- 13
0
votes
1
answer
895
views
Aligning zero on y axis to the labels on x axis of line chart in chartjs
I am building a line chart in chartjs, similar to this
Here is what I have achieved:
How can I make the zero on y-axis on the same level as the labels on the x axis.
I have tried almost everything ...
- 153
2
votes
1
answer
711
views
Issue while plotting bar chart with custom x-axis with month and year in chart.js
We are trying to plot bar chart using chart.js and wanted to display month and year in x-axis but unable to do so.
We are want to plot bar as shown below:
https://drive.google.com/file/d/...
1
vote
1
answer
2k
views
Don't show label tooltip in Chart.js if hover is less than 1 second
I have some information inside the doughnut chart and want to prevent tooltip blinks when this info is accessed with the mouse.
Check out the attached screenshot below:
I am trying to implement the ...
- 1,401
0
votes
1
answer
1k
views
Set animation dynamically in Chart.JS
I try to set animation dynamically in Chart.js. It should be either enabled or disabled based on some condition.
But it is always either enabled or disabled for some reason.
I've made a JSFiddle to ...
- 1,401
1
vote
1
answer
939
views
Can you change legend style for bar datasets with chart.js?
I'm using chart.js 2.9.4
I have a combined line and bar graph. The line dataset uses diamonds ('rectrot') for the points.
In the legend, I wish the bar datasets to remain as the default rectangles but ...
- 141
0
votes
1
answer
523
views
Click on Element Inside Doughnut Chart
I have a doughnut chart with HTML elements inside.
I would like to call a function when an element is clicked inside the chart.
Check out the screenshot below. I highlighted the element in red color.
...
- 1,401
-1
votes
1
answer
373
views
How Can I Change the Y-axis labels to be shown as strings other than number in Chart.js?
I am creating a chart.js line graph with -y-axis values up to almost a million. and the values on the y axis are
0
100000
200000
300000
400000 and so on. This can be tiresome to read and I want to ...
- 164
0
votes
1
answer
4k
views
How to change the position of the tooltip for the Bar type chart in Chart.Js
By default Chart.js will display the tool tip at the top of the bar for the bar type of charts.
I am trying to change the default position of the tooltip from the top to the center of the bar.
Which ...
- 163
1
vote
1
answer
84
views
HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
If I set height with style attribute for chart div
<div id="chartDiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div&...
- 3,311
0
votes
1
answer
1k
views
How to achieve a mixed chart of 'horizontal' bars and line chart using Chart.js?
With vertical bars apparently the whole Mixed Chart renders fine. But when I do it horizontally with two X Axes and one Y Axis, only the bars would appear but the line chart wouldn't. I have looked at ...
- 13
0
votes
1
answer
2k
views
Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2
I was trying to add onclick functionality on a slice of a doughnut, it's working fine for console.log, but not working if the check function is getting called. Its giving check is undefined.
class ...
- 181
1
vote
2
answers
7k
views
using react-chartjs-2 , How can I save my chart as png using a download button
I'm trying to download my chart.js charts as png using a button Onclick, but I have no idea how I'm going to achieve this , I've went through this answer React-chartjs-2 Doughnut chart export to png ...
- 259
2
votes
2
answers
3k
views
Chart.js how to use scriptable options
I am migrating chart.js to 3.x as per the migration guide.
https://www.chartjs.org/docs/master/getting-started/v3-migration/
I am trying to set the xAxis zeroLineColor to "#FFFFFF" and I ...
- 12k