1👍 ✅ You have to loop to all the bars/points of your chart, check if the value is over 80 and set the color. Here is an example for the bar chart: var bars = barChart.datasets[0].bars; for(var i = 0; i < bars.length; i++) { if(bars[i].value > 80) { bars[i].fillColor = “rgba(255, 0, 0, 0.2)”; … Read more
1👍 ✅ You can hide the grid-lines from the scales: yAxes: [{ gridLines: { display: false }, }] You won’t see any exceeding lines, if you do this for both axes. See this fiddle for a working demo If you need the grid-lines and only want to hide the exceeding line at 0, you can … Read more
1👍 ✅ see below updated method from your jsFiddle code: add below 2 lines: chartdata.data.labels.shift(); chartdata.data.labels.push(Math.random().toFixed(2)); $.each(data, function() { var tmp = chartdata.data.datasets[0].data; tmp.shift(); tmp.push(this[‘avg_c_p_u’][0]*100); chartdata.data.datasets[0].data = tmp; chartdata.data.labels.shift(); //new line chartdata.data.labels.push(Math.random().toFixed(2));//new line chartdata.update(); }); [Chartjs]-I cant get Legend to work for my chartjs donut chart Source:stackexchange.com
1👍 2 main issues 1- you are not using the refrence to the actual chart to try and generate the legend pieChart.Doughnut(PieData, pieOptions); will create your chart but you want to assign this to a variable so that you can call upon it again to generate the legend like; var myChart = pieChart.Doughnut(PieData, pieOptions); document.getElementById(“js-legend”).innerHTML … Read more
1👍 Your barData data object should be defined before you use it, at the top, like this: var barData = { labels : [“January”,”February”,”March”,”April”,”May”,”June”], datasets : [ { fillColor : “#48A497”, strokeColor : “#48A4D1”, data : [456,479,324,569,702,600] }, { fillColor : “rgba(73,188,170,0.4)”, strokeColor : “rgba(72,174,209,0.4)”, data : [364,504,605,400,345,320] } ] }; var income = document.getElementById(“income”).getContext(“2d”); … Read more
1👍 ✅ You can replicate the v1.x functionality by extending the line chart type and setting the tooltip mode to label, like so Chart.defaults.myLine = Chart.helpers.clone(Chart.defaults.line); Chart.controllers.myLine = Chart.controllers.line.extend({ updateElement: function (point) { var result = Chart.controllers.line.prototype.updateElement.apply(this, arguments); point.inRange = function (mouseX, mouseY) { var vm = this._view; // ignore the y coordinate return vm … Read more
1👍 ✅ You can put the code that draws the chart in a function and call that function on both the $(document).ready and $(“#submit-btn”).click event, like this: function drawChart() { var outputyearly = $(‘#outputyearly’); var amount = parseInt($(‘#amount’).val().replace(/,/g, ”), 10); var rate = parseFloat($(‘#rate’).val(), 10); var term = parseFloat($(‘#term’).val(), 10); //Destroy the dougnut chart here, … Read more
1👍 for change options: { scale: { ticks :{ fontColor: ‘#ff0000’, backdropColor: ‘#00FF00’ } } } to hide : scale: { ticks :{ display: false } } or scale: { ticks :{ showLabelBackdrop: false } } [Chartjs]-How to determine which bar was clicked on a chart js [Chartjs]-ChartJS: Remove padding on first and last bars … Read more
1👍 Usually the charts are displayed like that only, Jus imagine if my max data is 1 year huge. And if the user wishes to see ony for last one day, So big my canvas would be say 600×600 which accommodates around one year data, just imagine how small would be the size for displaying … Read more
1👍 ✅ You can do this with jqplot or chart.js An example from jsplot: $(document).ready(function(){ var s1 = [[‘a’,6], [‘b’,8], [‘c’,14], [‘d’,20]]; var s2 = [[‘a’, 8], [‘b’, 12], [‘c’, 6], [‘d’, 9]]; var plot3 = $.jqplot(‘chart3’, [s1, s2], { seriesDefaults: { // make this a donut chart. renderer:$.jqplot.DonutRenderer, rendererOptions:{ // Donut’s can be cut … Read more