score:2
Another way you can use min-height it should be inline style to the canvas and you can keep responsive true in this case
<div class="table-responsive">
<canvas id="canvas" style="min-height:250px" class="table"></canvas>
</div>
and you options responsive true
options: {
responsive: true,// other properties ....
}
score:7
I believe the answer is to set the maintainAspectRatio: false
option for the chart and then set the minimum height
of the chart responsively if the screen width reaches a certain size.
score:12
if you are using bootstrap you can use table responsive class to maintain the responsive view without maintainAspectRatio Option
so your canvas code:
<div class="table-responsive">
<canvas id="canvas" style="height:400px" class="table"></canvas>
</div>
and your options code:
options: {
responsive: false,
maintainAspectRatio: false,
//...your other values
Source: stackoverflow.com
Related Query
- chart.js adjust height in mobile view
- Set height of chart in Chart.js
- Angularjs - Charts.js: Same chart element doesn't redraw on other view
- Chart.js: width and height of a pie chart not respected
- Fix the height of Y-Axis of Bar chart in chart.js?
- How to get the actual chart width and height in chart.js
- How to add ChartJS code in Html2Pdf to view image
- Changing width of chart.js chart without changing height
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Css style not working well when resizing chart height in angular application
- Responsive Chart.js Doughnut Chart with minimum height
- ChartJS 2.6 - Bar chart fixed height scrollable-X
- Chart load time and animation slow on mobile device
- How change chart height in chart.js
- Passing an Array from a Flask view to the javascript code of another view
- Bar chart with min height and zero values - ChartJs
- Unable to set width and height on canvas in chart js
- Binding Chart to Canvas height width
- HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
- Displaying a chartjs chart within a bulma full height hero
- How to adjust Chart.js height according to datasets size. Ionic 3
- Dynamically Setting Height of Chart
- Chart.js : how I can adjust Pie chart radius?
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- Adjust appearance of tooltip in lien chart rendered by Chart.js
- chartjs - Not taking the height in reponsive chart
- Chart js legend are being cut off if the bar height is equal to port height - chart js
- attempting to change height and width of canvas for chart
More Query from same tag
- Hiding spaces with zero values in bar chart with chart.js
- Vuejs, how to build an object?
- Dynamically loaded chart data not showing Chartjs React
- Bar Color In Chart JS
- How to Render Chart Datasets in Vue?
- how do I make chart.js smaller? (html, chart.js)
- Flask Socketio | Update and plot a chart using background tasks created by Flask Executor or ThreadPoolExecutor
- How to remove colored label square
- ChartJS - Time graph from JSON
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- Is it possible to add a custom font to chart js?
- ChartJs - width scale of chart area and label area
- chartjs data labels - character level font colour control
- Hide min and max values from y Axis in Chart.js
- How to export report as PDF/CSV in ChartNew.js
- Chart.update is not a function typeError
- HTML: How to get rid of overlapping
- Unable to create Stacked Grouped Bar Chart with chart.js / react-chartjs-2 in React
- How to export charts.js dynamic chart to PDF in Rails
- Chart.js, change color of specific ticks
- ChartJS Only Show Large Font Size for a Specific Tick
- How to hide a portion of chart or a div in Angular?
- How to add a horizontal line at a specific point in chart.js when hovering?
- ChartJS date formating
- Reduce space between ticks in horizontal bar-chart chartJS
- Chart.js : Multiple colors for tooltipFontColor
- How to add chart js legends in ember?
- tooltip messes up bar chart in Chart.js
- old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)
- using react js to create a website that could read .csv file and show in chartjs