In updating to version 2.2.2 of ChartJS, I found that the accepted answer no longer works. The datasets will take an array holding styling information for the properties. In this case: var pointBackgroundColors = []; var myChart = new Chart($(‘#myChart’).get(0).getContext(‘2d’), { type: ‘line’, data: { datasets: [ { data: dataPoints, pointBackgroundColor: pointBackgroundColors } ] } … Read more
The correct method to use, in order to be able to draw another chart on the same canvas, is .destroy(). You must call it on the previously created chart object. You may also use the same variable for both charts. var grapharea = document.getElementById(“barChart”).getContext(“2d”); var myChart = new Chart(grapharea, { type: ‘bar’, data: barData, options: … Read more
Update: As @Soham Shetty comments, getSegmentsAtEvent(event) only works for 1.x and for 2.x getElementsAtEvent should be used. .getElementsAtEvent(e) Looks for the element under the event point, then returns all elements at the same data index. This is used internally for ‘label’ mode highlighting. Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, … Read more
For chart.js V2 (beta), use: var options = { scales: { yAxes: [{ display: true, ticks: { suggestedMin: 0, // minimum will be 0, unless there is a lower value. // OR // beginAtZero: true // minimum value will be 0. } }] } }; See chart.js documentation on linear axes configuration for more details.
Update – this answer is for Chart.js 1.x, if you are looking for a 2.x answer check the comments and other answers. You extend the line chart and include logic for drawing the line in the draw function. Preview HTML <div> <canvas id=”LineWithLine” width=”600″ height=”400″></canvas> </div> Script var data = { labels: [“JAN”, “FEB”, “MAR”, … Read more
If you want do increase spacing in all charts you can put this code before creating : Chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; Of course, I don’t try but i think you can change it (or copy the original Chart object before, to keep the original padding). Bye,
None of the other answers resize the text based off the amount of text and the size of the doughnut. Here is a small script you can use to dynamically place any amount of text in the middle, and it will automatically resize it. Example: http://jsfiddle.net/kdvuxbtj/ It will take any amount of text in the … Read more
Update: Looks like chartjs has been updated (see comment below). There are some examples up that look very nice: Here’s an example of updating a line chart using new data: http://jsbin.com/yitep/5/edit Here’s how we can update existing data on a line chart: http://jsbin.com/yitep/4/edit Original Post As of Nov 2013, there seem to be very few … Read more
There is an official plugin for Chart.js 2.7.0+ to do this: Datalabels Otherwise, you can loop through the points / bars onAnimationComplete and display the values Preview HTML <canvas id=”myChart1″ height=”300″ width=”500″></canvas> <canvas id=”myChart2″ height=”300″ width=”500″></canvas> Script var chartData = { labels: [“January”, “February”, “March”, “April”, “May”, “June”], datasets: [ { fillColor: “#79D1CF”, strokeColor: “#79D1CF”, … Read more