This seems stupidly trivial but try as I might I cannot seem to find how to set a default colour for bars in chart.js. My charts is taking its data from an ajax request and the chart is rendering ...

On the chart.js website, if you click the "Add Dataset" button under the chart, you get a doughnut inside a doughnut. Here's a screenshot of what it looks like: This is what I want, but I can't ...

Is it possible to implement zoom buttons for quick zooming (+ and - buttons) with chartjs Now I use this code: pan: { enabled: true, mode: 'xy', rangeMin: { // Format of min pan range depends...

In (Android WebView HTML5 canvas error) i posted a question regarding plotting graphs using Graph.js library. The problem i have now is that if i call the function to plot the graph multiple times,...

According to the "Tick Configuration" of Chart.js version 2.3 it is only possible to set a padding for the ticks on the Y-axis ("horizontal scale"): padding | Number |10 | Padding between the ti...

I have a React component Webstats which returns a Doughnut chart from react-chartjs-2 library. Here is how the code looks like: const Webstats = () => { //code to create chart. return <Dou...

When I import ChartDataSets I have an error message on line-chart.component.ts 'chart.js' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'? I don't understand where is th...

I'd like to customize a legend for line data so that the legend graphic is a line (styled like the actually data line) rather than a box. As far as I can tell from the source, the graphic can be a...

I am using ChartJS but I can't figure out how to get rid of the white box in the tooltip. What setting/option will set remove the border/white outline or at least let me set the color? Thank you!...

How do I get the X, Y coordinates relative to the chart with the onClick event in ChartJS V > 2.0? Take this JSFiddle as an example. A scatter is created in #canvas. When clicking on the center ...

I'm using chart js to show grouped bar chart and try to hide the title of the tooltip Code to generate bar var ctx = document.getElementById("myChart").getContext("2d"); var data = { labels: [...

How to render Text inside the doughnut chart, I am using ChartJs.

I have a piechart with four labels: var data = [{ data: [50, 55, 60, 33], labels: ["India", "China", "US", "Canada"], backgroundColor: [ "#4b77a9", "#5f255f", "#d21243", "#B27200" ], bord...

I want to make a part of the labels in chartJS bold. I've been looking in the documentation but I cant find of any way. I hope there is someone who can help me out if it is possible at all. :) Belo...

I have a working chart that I made using chart.js, and by default the Y axis is on the left, but I would like to have Y axis data on both sides I know I can change sides using: yAxes: [{ positio...

I use Chart.js to render a scattered line chart, which works pretty well. For the rendering algorithm I need to find out the highest value shown on the y-axis, so let's say my "largest" point in th...

I have a donut chart being created by chart.js as follows: <div id="chartContainer" style="height: 320px; width: 320px"> <canvas id="hoursFEContainer"></canvas> </div> ...

I am using Chart.js and everything is ok, but I want to replace current color background (fillColor: "rgba(250,174,50,0.5)") with a gradient. I have a solution for replacing gradient but ...

I have a Vue JS project using Webpack and need to import Chart.js. I have tried // import Chart from 'chart.js/Chart.min.js' This gives js errors when trying to use the library.

I'm trying to make a horizontal bar chart with an integer scale. As suggested in this question, I've tried to set scaleOverride, scaleSteps etc, but it seems not to be working. I tried to put them ...

I'm Working on Chart.js, wanted to implement Select All and Unselect All option for labels. I'm trying to find it out but couldn't get anything such. Please do help me out if anything such featur...

I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using: legend: { display: true, labels: { usePointStyle: true, }, } I want to change the si...

I have a graph with multiple data points / lines. Currently, if you hover near a data point, it will display the label/value for that point. What I'd like is the following: when you hover anywhere...

I've just started working with Chart.js, and I am getting very frustrated very quickly. I have my stacked bar chart working, but I can't get the click "events" to work. I have found a comment on G...

I am currently learning to use nodejs with express as my franework and handlebar as the template engine. PS: This is from the chartjs tutorial where they use parcel. When I am trying to do the same...