I'm using Chart.js to create pie charts. I need each chart to be 76x76px. Unfortunately, the rendered chart is always a bit smaller than the size if the wrapping div and the canvas itself.
If you inspect the chart in the FIDDLE, you'll see what I mean: the canvas element has a fixed size but the chart itself doesn't fill it fully.
It's almost as if there was a top margin reserved for something that isn't there.
The code:
HTML
<div class="wrapper">
<canvas id="myChart" width="76" height="76"></canvas>
</div>
JS
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 70],
backgroundColor: [
'green',
'gray'
],
borderWidth: 0
}]
},
options: {
tooltips: {
enabled: false
},
events: []
}
});
CSS
.wrapper {
width: 76px;
height: 76px;
}
Any ideas what I should do to make the pie chart fill the 76x76px canvas?
The additional space is reserved for the legend, which is enabled by default. Simply disable it and you should have the whole space for the chart:
legend: {
display: false
}
A working example:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 70],
backgroundColor: [
'green',
'gray'
],
borderWidth: 0
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false // <- the important part
},
events: []
}
});
.wrapper {
width: 76px;
height: 76px;
border: 1px solid black; /* for demonstration purposes*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<div class="wrapper">
<canvas id="myChart" width="76" height="76"></canvas>
</div>
Related
How do we put one time series on the left Y-axis and another time series on the right Y-axis (so that we can use two separate scales)?
This is the current chart view
This is the sample chart view I need with left and right time series on Y-axis
The sample code I have used to render the chart is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
var xValues = [8.8, 8.6, 9.0, 9.7, 9.5, 9.1, 9.0, 9.2, 9.0, 9.6];
var yValues = [31.0, 23.0, 23.0, 45.29, 44.21, 3.53, 83.0, 21.0, 80.0, 38.88]
var labels = ['W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18', 'W1P', 'W2P', 'W3P'];
new Chart("id", {
type: "line",
data: {
labels: labels,
datasets: [{
data: xValues,
borderColor: "green",
fill: false,
label: "Salary"
}, {
data: yValues,
borderColor: "orange",
fill: false,
label: "Ownership",
}]
},
options: {
legend: {display: true},
title: {
display: true,
text: "Salary & Ownership"
},
}
});
Thank you.
You can achieve this by providing yAxisID in each datasets data. Following that, mentioning position of each y axis in options.scales.
In the below code, I have made two y axis yAxis: y and yAxis: y1 and mentioned the position left for axis y and position right for axis y1.
You can read more about multi axis line chart here - link
const ctx = document.getElementById("chart").getContext("2d");
var xValues = [8.8, 8.6, 9.0, 9.7, 9.5, 9.1, 9.0, 9.2, 9.0, 9.6];
var yValues = [31.0, 23.0, 23.0, 45.29, 44.21, 3.53, 83.0, 21.0, 80.0, 38.88]
var labels = ['W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18', 'W1P', 'W2P', 'W3P'];
const chart6 = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
data: xValues,
borderColor: "green",
fill: false,
label: "Salary",
yAxisID: 'y',
}, {
data: yValues,
borderColor: "orange",
fill: false,
label: "Ownership",
yAxisID: 'y1',
}],
},
options: {
legend: {
display: true
},
title: {
display: true,
text: "Salary & Ownership"
},
scales: {
y: {
type: "linear",
display: true,
position: "left",
},
y1: {
type: "linear",
display: true,
position: "right",
},
},
}
});
#container {
width: clamp(250px, 80%, 1024px);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
row-gap: 2em;
}
#chart {
position: relative;
max-width: 400px;
max-height: 300px;
}
<body>
<div id="container">
<canvas id="chart" width="400" height="300" role="img" area-label="First Chart for showing frequencies with year." tabindex="0">
</div>
<!-- Date Adaptor (Moment) CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js#^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js">
</script>
</body>
I was working on a dashboard which has a doughnut chart on the right side of the page. While I was successful at making the the itself i've been struggling with the height of the the chart. If canvas tag is set using attributes the the whole chart stretches and the height of the chart has a default size of of (128px).
Here is the code below:-
<input type="text" name="balance" value="42" id="balance" hidden>
<div class="chartWrapper">
<canvas id="myChart" height="180px"></canvas>
<div class="ChartContent">
<h2>84%</h2>
</div>
</div>
//START DOUGHNUT CHART
var balance = document.getElementById('balance').value;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Withdrawal Amount', 'Balance Amount'],
datasets: [{
data: [80, 124, balance],
backgroundColor: [
'#232c66',
'#ffa5a2',
],
borderColor: [
'#232c66',
'#ffa5a2',
],
borderWidth: 2,
hoverBorderWidth: 1,
weight: 2,
clip:
{
left: 5,
top: 5,
right: -2,
bottom: 0
}
}]
},
options: {
cutoutPercentage: 180,
rotation : 5,
animation: true,
legend: {
position: 'chartArea',
padding: 1
},
layout: {
padding: 20
}
}
});
//END DOUGHNUT CHART
HTML
<body>
<div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
JAVASCRIPT
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options =
{
title:
{
display:false,
},
legend:
{
display:false
},
tooltip:
{
enabled:false
},
animation:
{
duration: 0
}
}
var data =
{
datasets:
[
{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0
}
]
}
var chart =
new Chart(context,
{
type: "doughnut",
cutout: 100 * radius,
responsive: true,
data: data,
options: options
});
</script>
FIDDLE
https://jsfiddle.net/t5a41rdj/
As per title, somehow this chart has a little offset on top which I can't seem to be able to get rid of, despite having disabled legend and title.
Anything obvious I am missing?
This is because you did not disable the legend, title or tooltip. If you hover your chart you can see the tooltip is still working, title is hidden by default. Why the legend does not show I dont really know, should still show 1 item with undefined as text. But if you disable it in the correct space with is the plugins namespace you see your extra padding goes away.
Also cutout and responsive have to be configured in the options not in the root of new Chart:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options = {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
animation: {
duration: 0
},
cutout: 100 * radius,
responsive: true,
}
var data = {
datasets: [{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0,
}]
}
var chart =
new Chart(context, {
type: "doughnut",
data: data,
options: options
});
<body>
<div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
The Chart Spans across the entire Web Page and I cant resize it. I've tried seting the height/width of the canvas and the canvas with no luck.
Here is my Html:
<div id="chartbox">
<canvas id="myChart" display="block"></canvas>
</div>
<script>
var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]
var thisChart = new Chart(document.getElementById("myChart"), {
type: 'line',
options: {
responsive: true
},
data: {
labels: xaxis,
datasets: [
{
data: yaxis,
label: "Test",
borderColor: "#3e95cd",
}
]
}
});
</script>
If you are styling the canvas element directly with non relative values you need to set responsive to false in the options, if you are styling the width with relative values you need to apply them to the surrounding div
https://www.chartjs.org/docs/master/configuration/responsive.html
I hope my answer is helpful to you, you just have to specify certain CSS rules for the parent element of the graphic.
var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]
var thisChart = new Chart(document.getElementById("myChart"), {
type: 'line',
options: {
responsive: true
},
data: {
labels: xaxis,
datasets: [
{
data: yaxis,
label: "Test",
borderColor: "#3e95cd",
}
]
}
});
#chartbox {
display: block;
width: 400px;
height: 400px;
}
<div id="chartbox">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
I have a large data set which, when graphed have several vertical sections as shown below. Chart.js formats these sections with thin, semi-transparent coloring. I want to format these to match the regular, thicker and solid line style.
The dataset itself is normally in a separate file called data.js, but I linked a portion of it from a CodePen.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 12,
fontStyle: 'bold',
display: true,
labelString: 'Y(1)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 30,
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
fill: false,
label: 'Graph Line',
data: data,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
}
};
var chart = new Chart(ctx, config);
</script>
</html>
I figured it out, what you're seeing when you look at the graph is actually mostly just the individual points. Due to the large number of point data, it wasn't apparent at first, but the lines were thinner than the points width.
The vertical lines being so much thinner are actually because those are formatted with the line settings. By setting the transparency of the points color and border to 0, and by reformatting the line settings, I got was able to format it the way I intended. Sample below for reference should anyone else have a similar issue in the future.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 12,
fontStyle: 'bold',
display: true,
labelString: 'Y(1)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 30,
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'Graph Line',
data: data,
}]
}
};
var chart = new Chart(ctx, config);
</script>
</html>
Note: I'll accept this answer when it allows me in 2 days since it's my own.