Related
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,
// },
// },
},
});
I just coded my first chart in chart.js, but i cant move it to the center of my webpage
here is my code for the chart in html:
Use "display:block;margin:0 auto;" to center the div containing the JS table.
Make a container for your canvas and give it display: inline-block style. Then you can treat the container like any html block.
var ctx = document.getElementById('myChart');
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],
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
}
}]
}
}
});
.outbox{
text-align: center;
}
.container{
width: 50%;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="outbox">
<div class="container">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
You want to center the canvas since that is where the chart is drawn on. To center the canvas see this stack article: How to center canvas in html5
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>
My charts are rendering correctly, but they are overlapping on the same spot and change between themselves depending on where I mouseover (both graphs are in exactly the same position even though their canvas and div elements are not). Here are the images to show the div and canvas locations:
Canvas 1
Canvas 2
I am not familiar with CSS so I used some tutorial snippets to get a temporary layout before I begin to change the style and colours, but I need help on positioning these elements correctly.
Here is the HTML code:
<div id="awp" class="tabcontent">
<div class="dropdown">
<button onclick="dropMenu(1)" class="dropbtn">Choose Dates</button>
<div id="myDropdown1" class="dropdown-content">
<a id="2016" onClick="addData(myChart, 'check' , 2)">Last 3 Months</a>
<a id="5m" onClick="removeData(myChart)">Test 3</a>
<a id="testNew">Bye bye</a>
<a id = "2015" onClick="addMoreData(myChart)">does</a>
</div>
</div>
<h3>Recreated in chart.js first graphs</h3>
<div class="contain1">
<canvas id="results-graph" class="cyo" width="600" height="500"></canvas>
</div>
<div class="contain2">
<canvas id="results-graph2" class="oem" width="600" height="500"></canvas>
</div>
Here is the CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
.contain1 {
width: 600px;
height: 500px;
float: left;
overflow: auto;
}
.contain2 {
width: 600px;
height: 500px;
float: right;
overflow: auto;
}
.cyo {
display: block;
width: 600px;
height: 500px;
}
.oem {
display: block;
width: 600px;
height: 500px;
}
Here is the chart code:
<script>
var data = [12, 19, 13, 5, 21, 13];
var ctx = document.getElementById("results-graph");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data,
yAxisID: 'A',
backgroundColor: [
'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)'
],
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: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',
}
}]
}
}
});
</script>
<script>
var data2 = [12, 19, 13, 5, 21, 13];
var ctx2 = document.getElementById("results-graph");
var myChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
datasets: [ {
label: 'Average Watch Sell Price in USD',
data: data2,
type: 'line',
yAxisID: 'B',
fill: false,
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
},
{
label: 'Amount of Watches Sold',
data: data2,
yAxisID: 'A',
backgroundColor: [
'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)'
],
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: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Amount Sold',
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
beginAtZero:true
},
scaleLabel:{
display: true,
labelString: 'Average Price in USD',
}
}]
}
}
});</script>
You did not change the that is why the second graph did not generate.
var ctx2 = document.getElementById("results-graph2");
Also you can provide background and border like this.
backgroundColor: ['rgba(0,0,0,1)'],
borderColor: ['rgba(0,0,0,1)']
JSFiddle: here
I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script.
Is there any way to set the height of the graph from the script?
var ctx = $('#myChart');
ctx.height(500);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
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
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
See code on fiddle: Jsfiddle
If you disable the maintain aspect ratio in options then it uses the available height:
var chart = new Chart('blabla', {
type: 'bar',
data: {
},
options: {
maintainAspectRatio: false,
}
});
The easiest way is to create a container for the canvas and set its height:
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
and set
options: {
responsive: true,
maintainAspectRatio: false
}
Seems like var ctx = $('#myChart'); is returning a list of elements. You would need to reference the first by using ctx[0].
Also height is a property, not a function.
I did it this way in my code:
var chartEl = document.getElementById("myChart");
chartEl.height = 500;
You can wrap your canvas element in a parent div, relatively positioned, then give that div the height you want, setting maintainAspectRatio: false in your options
//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>
<script>
new Chart(somechart, {
options: {
responsive: true,
maintainAspectRatio: false
/*, your other options*/
}
});
</script>
This one worked for me:
I set the height from HTML
canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]
Then I disabled to maintaining aspect ratio
options: {
responsive: true,
maintainAspectRatio: false,
You can also set the dimensions to the canvas
<canvas id="myChart" width="400" height="400"></canvas>
And then set the responsive options to false to always maintain the chart at the size specified.
options: {
responsive: false,
}
I created a container and set it the desired height of the view port (depending on the number of charts or chart specific sizes):
.graph-container {
width: 100%;
height: 30vh;
}
To be dynamic to screen sizes I set the container as follows:
*Small media devices specific styles*/
#media screen and (max-width: 800px) {
.graph-container {
display: block;
float: none;
width: 100%;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
height: auto;
}
}
Of course very important (as have been referred to numerous times) set the following option properties of your chart:
options:{
maintainAspectRatio: false,
responsive: true,
}
He's right. If you want to stay with jQuery you could do this
var ctx = $('#myChart')[0];
ctx.height = 500;
or
var ctx = $('#myChart');
ctx.attr('height',500);
You should use html height attribute for the canvas element as:
<div class="chart">
<canvas id="myChart" height="100"></canvas>
</div>
Set the aspectRatio property of the chart to 0 did the trick for me...
var ctx = $('#myChart');
ctx.height(500);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
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
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
myChart.aspectRatio = 0;
See, there is a mistake in the initializing statement. The maintainAspectRatio should come inside the options object as follows
...
options = {
maintainAspectRatio: false,
...
}
...
Now, what you can do is set the height of the parent element of the chart, so here div .chart is the parent of div #myChart.
So, specifying the height of div .chart should just work fine.
Consider the following code.
<div class="chart" style="height: 500px;">
<canvas id="myChart"></canvas>
</div>
Change the height according to yourself, for me 500px just works fine ;)
Just to add on to the answer given by #numediaweb
In case you're banging your head against the wall because after following the instructions to set maintainAspectRatio=false: I originally copied my code from an example I got on a website on using Chart.js with Angular 2+:
<div style="display: block">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[colors]="chartColors"
[chartType]="chartType">
</canvas>
</div>
To make this work correctly you must remove the embedded (and unnecessary) style="display: block" Instead define a class for the enclosing div, and define its height in CSS.
Once you do that, the chart should have responsive width but fixed height.
Needed the chart to fill the parent element 100%, rather than setting height manually, and the problem was to force parent div to always fill remaining space.
After setting responsive and ratio options (check out related chartjs doc), the following css did the trick:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
Setting the Size of a chartjs diagram can be simply achieved by setting the with of a surrounding container:
<div style="width:400px;">
<canvas id="myChart"></canvas>
</div>
But an important detail is, that you may need to resize your diagram after creation:
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
......
data: {
........
},
options: {
responsive: false,
maintainAspectRatio: true
}
});
// now resize the new chart to fit into the canvas....
myChart.resize();
The problem here is that maintainAspectRatio needs to be inside the options node, not at the same level as in the example.
Add one relative position element whose height is calculated from padding (works same as aspect ratio) but if you need that chart does not exceed certain maximum height then use new powerful min unit of css. Also add fixed fallback padding where this is not supported.
<div class="dashboard-charts" style="position: relative; padding-top:40%; padding-top:min(40%,530px)">
<div style="position:absolute;width: 100%;height:100%;left: 0;top: 0">
<canvas id="sales-dashboard-bar"></canvas>
</div>
</div>
and then inside options object of javascript set maintainAspectRatio to false to consider and use parent element height which in this case is absolute positioned and sized relative to the grandparent's size.
var mychart = new Chart(document.getElementById("sales-dashboard-bar"),{
options: {
maintainAspectRatio: false,
}
})
Thus chart will scale nicely with aspect ratio of 2.5 until it hits the maximum height which is 530px here and stops scaling afterwards.
For react, doing this works:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>