score:3
as from docs for chart.js it's recommended to wrap canvas into container div and change width/height of the container. but basically it's changing either by given width or height.
found a more flexible custom solution from lannymcnie that can be used for any canvas responsiveness:
var stage = new createjs.stage("canvas");
var c = new createjs.shape();
c.graphics.f("#f00").dc(0,0,50); // drawn a 100x100 circle from the center
var t = new createjs.text("resize the browser/frame to redraw", "24px arial bold", "#000");
t.x = t.y = 20;
stage.addchild(c, t);
window.addeventlistener("resize", handleresize);
function handleresize() {
var w = window.innerwidth-2; // -2 accounts for the border
var h = window.innerheight-2;
stage.canvas.width = w;
stage.canvas.height = h;
//
var ratio = 100/100; // 100 is the width and height of the circle content.
var windowratio = w/h;
var scale = w/100;
if (windowratio > ratio) {
scale = h/100;
}
// scale up to fit width or height
c.scalex= c.scaley = scale;
// center the shape
c.x = w / 2;
c.y = h / 2;
stage.update();
}
handleresize(); // first draw
html, body {
padding: 0; margin: 0;
overflow:hidden;
}
canvas {
border: 1px solid #f00;
}
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>
score:0
you can have it responsive and set a different aspect ratio. my issue was that the chart tend to be squeezed on mobile device taking barely no height.
to remedy, with chart.js 3.2.1, i am using the aspectratio option:
options: {
aspectratio: 1,
}
this way the chart is square and stay square, you can play with this number usually between 0.5 to 2 to find a ratio that suits you on both displays.
score:12
- create class
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
- create div with class chart-container and place canvas tag inside it.
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
- chart options, use property
maintainaspectratio
set to false:
options: {
maintainaspectratio: false,
responsive: true,
...
}
Source: stackoverflow.com
Related Query
- Chart.js responsive option - Chart not filling container
- Chart.js not height responsive
- Chart.js: width and height of a pie chart not respected
- Css style not working well when resizing chart height in angular application
- Responsive Chart.js Doughnut Chart with minimum height
- VueJs and ChartJs - Chart is responsive in width, but not height?
- Chartjs does not render chart when set responsive option to true
- Google Pie Chart Is Not Responsive
- chartjs - Not taking the height in reponsive chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- angular-chart.js - chart height not working on iOS but works fine on Android and Web
- How to set a responsive chart.js chart to not fill screen?
- how to not repeat code while creating multiple charts in chart js
- Set height of chart in Chart.js
- ReferenceError: Chart is not defined - chartjs
- Can't make chart js responsive
- Chart.js: bar chart first bar and last bar not displaying in full
- show label in tooltip but not in x axis for chartjs line chart
- Making the labels responsive in chart js
- Html chart does not fit a small Android WebView
- Chart.js ng2-charts colors in pie chart not showing
- Chart.JS Mixed Chart - Bars Not Showing
- chartjs height does not follow parent container
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Angular-chart.js - Make line chart does not curve
- angular-chartjs line chart TypeError: t.merge is not a function
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- Chart.js line chart is not displaying
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Line chart is not being displayed in Chart.js
More Query from same tag
- Why tooltip position absolute does not apply using js?
- Trigger axispointer function on existing chart js via console
- Chart JS - Grid colors and gradient fill not showing
- How do I customise doughnut chart using chart.js
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- Why is my chart.js not plotting correctly when changed to logarithmic?
- How can I hide point label in chart Js?
- PrimeNG pie chart randomly displays, and displays on change of resolution
- ChartJS Arrays Acting as One Item
- How to hide other section of chartjs on click of lengend
- Chart.js axes always show zero
- Can you set seperate colors for different axes in Chart.js?
- Vuejs parameters in props
- Saving chart.js chart to a folder (Not download)
- Chart.js Y-Axis data not rendering
- ChartJS How to set max labels for X axis?
- How can I query data from my Cosmos DB in Angular 7?
- how to show bar graph on y axis in charjs
- How to increase the ghap between catergories or labels react-chartjs-2
- Unable to hide x axis for horizontal bar chart vue js
- Right way to Plot Dynamic Grouped Bar chart.js
- Chart.js: compare two periods like Google Analytics with a line chart
- Create chart using one of the given javascript libraries
- hide dataset by default using Chart.js and a custom script
- Chartjs only showing dots, line not showing
- How do I remove the ticks or inner circles of my polar area chart Chart.js
- How to loop inside javascript using php variable
- Chart.js - Add text/label to bubble chart elements without using tooltips?
- How to plot data coming async in a chartjs chart
- chart.js time graph for Full day