We Keep Coding

Chart.js not resizing according to the change in container width

I am creating a dashboard that has multiple Chart.js. The dashboard has sidebar navigation which can be minimized when clicking the toggle button. Which increases the width of the container.
The chart does not fit its container to its height as you can see in the image.
but If I add CSS for the canvas tag it will use the height that is specified in the CSS. But its stretches the chart and makes it blury.
Also If I toggle the sidebar to minimize, the width of the chart increases but when I toggle to maximize the size of sidebar, the width of chart does not decrease according to the width of main container. As you can see, the dark part expanded outside the viewport.
HTML:
<div class="graph1">
<div>
<h5>Profit & Loss (Column Grouped Chart)</h5>
<canvas id="myChart1"></canvas>
</div>
<div>
<h5>Fuel Consumed (Litres)</h5>
<canvas id="myChart2"></canvas>
</div>
<div>
<h5>Fleet Usage</h5>
<canvas id="myChart3"></canvas>
</div>
</div>
CSS:
.graph1 {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 1rem;
height: 26rem;
margin-bottom: 1.5rem;
& > div {
padding: 1rem;
box-shadow: 0px 3px 6px #00000029;
border-radius: 0.6rem;
}
canvas {
width: 100%;
min-height: 26rem;
}
}
JS:
/*Chart1*/
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
],
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: true,
// scales: {
// y: {
// beginAtZero: true,
// },
// },
},
});

How to make the chart smaller than its container

I'm implementing asp.net core project. I have a pie chart.js. I used outlabel plugin to show labels for each piece of the piechart. Now the problem is how I can make the chart smaller than its container in order to show all the labels completely. Right now after running the project, the console displays half of the few of the labels. My code is like the following:
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> #*padding:20px;*# #*width="650" height="450"*#
<canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas> #*width="710" height="520"*#
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
#*outlabel plugin*#
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
$(function () {
var bgcolor= [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
labels: #Html.Raw(XLabels),
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: #Html.Raw(YValues)
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
//===================================new outlabel implementation
//outlabel implementation
zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
//===================================
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
</script>
<style>
.container, .box1,box2,box3 {
/*display: block;*/
/*padding: 10px;*/
margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
text-align: justify;
}
.container{
border:1px solid red;
display: block;
}
.box2{
border:1px solid purple;
padding-top: 60px;
background-color: yellowgreen;
padding-bottom: 60px;
/*padding-right:40px;
padding-right:40px;
padding-left:40px;*/
margin-top:40px;
margin-right:40px;
display: inline-block;
/*float:left;*/
}
</style>

There was similar issue on github
One workaround is to use layout option
new Chart(ctx, {
...,
layout: {
padding: 100
}
}
Example
$(function() {
var bgcolor = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
width: 100,
height: 100,
labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: [20, 40, 30, 10, 50, 15, 10]
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
layout: {
padding: 100
},
zoomOutPercentage: 55,
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type: 'pie'
});
})
.container,
.box1,
box2,
box3 {
margin-bottom: 50px;
text-align: justify;
}
.container {
display: block;
}
.box2 {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
<canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
</div>
</div>
</div>

I can not properly re scale <canvas> with width and height attributes

I'm using Charts.js library and my <canvas> element is acting strangely when i try to re scale it by changing it's width and height attributes
I'm definitely missing something , keep in mind that i capture the whole window
here are some examples:
width=400 , height=100
width="100" height="100"
width="10" height="20"
width="400" height="50"
Try it here , this is supposed to be a 10x10 square (pretty small right?)
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="10" height="10"></canvas>
Why can't i make it a 100x100 square? and not be placed in the whole browser?do i need a placeholder for this?
Here is the playground that makes a graph non-resizable as you might notice in the desktop view although the mobile view is perfect
Desktop View
Mobile View
Note:
When <div> is not included and <canvas> has not attributes in browser it's huge , and on mobile resolution is perfect. If you apply width and height to <div> which contains <canvas> you can resize it but on mobile will be stretched.
Edit: added code snippet
Edit2: added code playground

This is happening because you have "reponsive" activated by default. In this case , the attributes width and height will be ignored.
The solution is to desactivate the responsive option like this :
options: {
responsive:false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}

If you look at it through your console, you will notice that an extra element div.chartjs-size-monitor is added to the DOM right before your target canvas.
This is done by ChartJS to ensure the canvas can be resized properly.
To solve the it, you simply need to
Move the canvas into a container element
Set your size at the container element.
Note that the parent element must be display: block (i.e., div).
ChartJS will change the width and height attribute of your canvas anyway, so there is no point setting it from your end.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
/* CODE BELOW ONLY EXIST TO IMITATE BROWSER SIZE */
const wrapper = document.querySelector('#window');
const desktop = document.querySelector('#desktop');
const mobile = document.querySelector('#mobile');
desktop.addEventListener('click', resize.bind(this, 'desktop'));
mobile.addEventListener('click', resize.bind(this, 'mobile'));
function resize(size, event){
event.preventDefault();
wrapper.classList.remove('desktop', 'mobile')
wrapper.classList.add(size);
}
/* CSS HERE ONLY EXIST TO IMITATE BROWSER SIZE */
#window {
margin-top: 10px;
border: 1px solid black;
transition: all 0.3s;
}
#window.desktop {
width: 450px;
height: 253px;
}
#window.mobile {
width: 320px;
height: 568px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<!-- Ignore these -->
<button id="desktop">Desktop</button>
<button id="mobile">Mobile</button>
<!-- #window is to imitate browser window size -->
<!-- imagine #container as the direct children of <body> -->
<div id="window" class="desktop">
<!-- Moved all CSS to HTML as your requirement -->
<div id="container" style="width: 100%; height: 100%; position: relative;">
<canvas id="myChart"></canvas>
</div>
</div>

chart.js chart distorted with fixed width

I have a chart.js canvas inside a container which I gave a fixed min-width, so people could scroll the chart on mobile devices.
But as soon as the container has its fixed width, the chart is getting more distorted, the smaller the screen gets.
In the chart I have already tried setting the options responsive: true and maintainAspectRatio: false. This solved the problem a bit, but the chart is still distorted.
Chart.js Options:
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: false,
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}]
}
};
HTML:
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="tds-chart-mem"></canvas>
</div>
CSS:
.tds-chart-inner {
min-width: 850px !important;
}
.tds-hor-scroll {
left: 0px;
width: 100% !important;
overflow-x: scroll;
}
canvas {
left: 0px;
height: 300px !important;
}
Working chart
Distorted chart

for me the problem was that graph was setting for itself height that was bigger that I myself had set to canvas.
my solution was:
I removed all height setups for canvas (css and tag attribute)
Created container tag for the canvas and set height to it
in chart options added:
responsive: true,
maintainAspectRatio: false,
in the example in the question problem was in css:
canvas {
left: 0px;
height: 300px !important;
}
i would change it to:
.tds-hor-scroll {
overflow-x: auto;
}
.tds-chart-inner {
min-width: 850px;
height: 300px;
}
<div class="tds-hor-scroll">
<div class="tds-chart-inner">
<canvas id="tds-chart-mem"></canvas>
</div>
</div>

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<style>
.tds-chart-inner {
width:100%;
}
</style>
<body class="">
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3,80],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
}
}]
}
}
});
</script>

how to show bar chart for every product

I'm trying to print a bar chart for every product to show a summary of data but the bar chart is showing only once with different values at y-axis.
How can I show the data for each product on a bar chart?
Review.js
angular.module('App.review',[]).directive('review', function($cookieStore){
return{
restrict:'E',
controller:function($scope, $window, $http){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl:'scripts/directives/ReviewDirective/review.html',
transclude:false
}
});
review.html
<div style="width:100%; border:solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
product.html
<td ng-controller="ReviewsCtrl" >
<div data-ng-repeat="r in dataList" >
<div data-ng-if=" r.id == item.productId">
<div data-ng-init="data =r.data" >
{{data=r.data}}
<review></review>
</div>
</div>
</div>
</td>

Check this code
var app = angular.module('App.review', []);
app.directive('review', function () {
return {
restrict: 'E',
scope: {
data: "=data"
},
link: function ($scope, element, attrs) {
var ctx = element[0].querySelector('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl: 'review.html',
transclude: false
}
});
app.controller('ReviewsCtrl', function ($scope) {
$scope.dataList = [{
productId: 1,
productName: 'One',
data: [1, 2, 3, 4, 5]
}, {
productId: 2,
productName: 'Two',
data: [6, 7, 8, 1, 1]
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<div ng-app="App.review">
<table>
<tr>
<td ng-controller="ReviewsCtrl">
<div data-ng-repeat="r in dataList">
{{r.productName}}
<review data="r.data"></review>
</div>
</td>
</tr>
</table>
<script type="text/ng-template" id="review.html">
<div style="width: 100%; border: solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
</script>
</div>