For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?), The yAxes field needs to be in a scales object the yAxis is referenced by id not name. For the scale steps/size you just need to wrap … 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
As of v2, you can simply specify an array of values to correspond to a color for each bar via the backgroundColor property: datasets: [{ label: “My First dataset”, data: [20, 59, 80, 81, 56, 55, 40], backgroundColor: [“red”, “blue”, “green”, “blue”, “red”, “blue”], }], This is also possible for the borderColor, hoverBackgroundColor, hoverBorderColor. From … Read more
You can achieve this by setting point’s radius property in configuration options as follows: var chartConfig = { type: ‘line’, options: { elements: { point:{ radius: 0 } } } } Tooltips for the points will also gone off.
Try adding the options.scales.xAxes.ticks.maxTicksLimit option: xAxes: [{ type: ‘time’, ticks: { autoSkip: true, maxTicksLimit: 20 } }]
You can override the canvas style width !important … canvas{ width:1000px !important; height:600px !important; } also specify responsive:true, property under options.. options: { responsive: true, maintainAspectRatio: false, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } update under options added : maintainAspectRatio: false, link : http://codepen.io/theConstructor/pen/KMpqvo
In Chart.js version 2.0, it is possible to set labels for axes: options = { scales: { yAxes: [{ scaleLabel: { display: true, labelString: ‘probability’ } }] } } See Labelling documentation for more details.
I had huge problems with this First I tried .clear() then I tried .destroy() and I tried setting my chart reference to null What finally fixed the issue for me: deleting the <canvas> element and then reappending a new <canvas> to the parent container My specific code (obviously there’s a million ways to do this): … Read more
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
Solution for Version 1 (old charts version) According to documentation on chartjs.org you can set the ‘bezierCurve’ in options and pass it in when you create the chart. bezierCurve: false eg: var options = { //Boolean – Whether the line is curved between points bezierCurve : false }; var myLine = new Chart(document.getElementById(“canvas”).getContext(“2d”)).Line(lineChartData, options); Update … Read more