Skip to content

Tag: chart.js

How to remove Label from charts.js

I am using charts.js to create a charts for my website. I am unable the remove the legend from the chart. I did not found the solution. This is the first time I am using charts.js library. code: }); Thanks in advance. Answer Here is the documentation you can simply set legend.display to false. You can try it here

Json file data to Chart.JS

I’m trying to add multiple datasets from a json file to a linechart in chart.JS. Here’s my JS code: Here’s my HTML: All other neccessary HTML code is added to make the file valid. There is something wrong with this code i just can’t figure out, I’m able to use the charts to input manual data but when it comes

Chart.js- Dates not displaying correctly on chart and axis labels not showing

I’m trying to label my axes on my chart. I’m using chart.js v3.9.1 and I believe I’ve followed the documentation, however the labels aren’t showing up (see below): health_hub_tracker.html: You will also see that on my x axis- the dates are coming through as a sum. The data I have are: [‘2022-10-09’, ‘2022-10-09’, ‘2022-10-05’, ‘2022-10-05’, ‘2022-10-05’] so it is

charts.js displays only first x and y value from a json api response

I am trying to render a chart with charts.js with a json api but the rendered chart displays only the first x and y values from the json the json is fetched using xmlhttp json api link Answer It seems that Chart.js does not recognize the thousands separators (,) in your values. You can get around your problem by

How can I highlight a bar in ChartJS when selected in the legend?

I need to change background color of bar when selected it in the legend. When I updated chart with ci.update() color is reset. Answer When the chart.update() is invoked, the chart is re-configuring itself starting from and all element options (changed in the meanwhile) are lost. The must be changed. The original backgroundColors must be stored because otherwise

Chart.js: Why are there two y axes in my line graph?

I’m using chart.js to build a line graph. I can’t figure out why there are two y-axes on my graph. I also tried changing the color of the tick labels to white but it isn’t working either. Thanks for your help! Here’s the preview of my code: Answer Because you have two axes defined for yAxes. Using proper indentation

How to properly use formatting with chartjs?

I am trying to use formatting in Chart.js. I’ve configured the imports correctly, but it still doesn’t display what I want It doesn’t work on my local pc. I uploaded the same code to codepen and it didn’t work either. You can verify it here Any ideas what am I doing wrong? Thanks Answer As described here, you need to