1👍 ✅ There are two things here that are important to not mix up: HTML Attributes, and CSS tags/properties. An attribute is the class=”topleft” part of <div class=”topleft”> (you can see the full list here). A CSS tag is what holds things like display: block;. You can edit CSS tags with an HTML attribute, so … Read more
1👍 ✅ You would try to embed the data from php directly. or include the file using <?php include(‘getTestData.php’); ?> such like below to replace the ajax get request. <?php foreach($dataGet->label as $label){ ?> labels.push(“<?= $label ?>”); <?= } ?> <?php foreach($dataGet->temperature as $temperature){ ?> temperature.push(“<?= $temperature ?>”); <?= } ?> <?php foreach($dataGet->humidity as $humidity){ … Read more
1👍 ✅ This is not part of the default behavior. You will need to modify the chart.js script. How to add text inside the doughnut chart using Chart.js? [Chartjs]-Prevent size of canvas chart js to equal window height and width Source:stackexchange.com
1👍 ✅ Add ‘responsive: false’ to the chart options options: { responsive: false, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } [Chartjs]-Tooltip alignement with Chart.js v2 Source:stackexchange.com
1👍 Thank you @Tektiv, I’ve updated your answer as it didn’t solve my issue on chromium 54 as you can see here: I’m using this option: Chart.defaults.global.tooltips.footerFontSize = 0; Along with this footer callback: options: { tooltips: { callbacks: { footer: function() { return ‘ ‘; }, label: PercentageTooltip } } } Here’s the jsFiddle, … Read more
1👍 ✅ Add this after options: Chart.types.Doughnut.extend({ name: “DoughnutAlt”, draw: function () { Chart.types.Doughnut.prototype.draw.apply(this, arguments); //find the center point var x = this.chart.canvas.clientWidth / 2; var y = this.chart.canvas.clientHeight / 2; //render the text this.chart.ctx.beginPath(); this.chart.ctx.arc(x,y,100,0,2*Math.PI); this.chart.ctx.fillStyle = ‘#ffff00’; this.chart.ctx.fill(); } }); Change myNewChart = new Chart(ct).Doughnut(data, options); to myNewChart = new Chart(ct).DoughnutAlt(data, options); Updated … Read more
1👍 Is this what you want? You can pass data you get from rails database and insert it into your js code immediately (no need to put it to data attribute in canvas tag). I see you are using chart js v2 so no need to get context I think. Also I fixed your code … Read more
1👍 The problem is how chart.js is drawing the small line segments between data points. Here is a fiddle that animates a full opacity line over top of a lighter line. The second line is growing at a step=1 while the lighter line is nice and straight [{x:-100,y:-100},{x:100,y:100}]. If you change to step=10 you will … Read more
1👍 ✅ I think the problem is not on React, but in ChartJS … It’s getting new information… but instead of updating … it is inserting new canvas.. Try setting redraw. From the docs https://github.com/reactjs/react-chartjs if data passed into the component changes, points will animate between values using chart.js’ .update(). If you want the chart … Read more
1👍 ✅ It might be easier to wrap the canvas in a div/span/something and set the size there. As you have set responsive: true this means that chart.js tries to fill the parent on resize and it does this by setting the canvas height and width. https://jsfiddle.net/zpvfph9m/1/ <div style=”width:50%”> <canvas id=”fisheye” width=”400″ height=”400″></canvas> </div> Would … Read more