How to Set Height and Width of a Chart in Chart.js ?
Last Updated :
01 Aug, 2024
Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts for web applications. One of the key aspects of chart customization is controlling its dimensions. In this article, we'll explore how to set the height and width of a Chart.js chart.
Chart.js CDN link
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
Approach 1: By using the Custom style
We can set the height and the width as CSS properties for the container containing the canvas of our chart inside the css code.
Example: The below code will explain the use of the Custom style to set the height and the width of the chart.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js - Set Height and Width</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
.chart-container {
width: 30vw;
height: 40vh;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
display: block;
}
h1 {
color: #2f8d46;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<h1>GeeksForGeeks Chart Example</h1>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My Dataset',
data: [65, 71, 62, 81, 34, 55, 47],
backgroundColor: '#2f8d46',
borderColor: '#1b5e20',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Output:
Output1Approach 2: By setting height and width as attribuutes
We can set the height and the width by passing them as attributes directly to the canvas of our chart. We also have to set responsive to false within options for width to work correctly.
Syntax:
<canvas id="myChart" height="200" width="500"></canvas>
// In Options
options: {
responsive: false,
}
Example: The below example will show how you can set height nad width of the chart using the attributes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js - Set Height and Width</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
.chart-container {
width: 600px;
height: 300px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
canvas {
display: block;
}
h1 {
color: #2f8d46;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="chart-container">
<h1>GeeksForGeeks Chart Example</h1>
<canvas id="myChart" width="600" height="300"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My Dataset',
data: [65, 71, 62, 81, 34, 55, 47],
backgroundColor: '#2f8d46',
borderColor: '#1b5e20',
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Output:
Outpu2Appraoch 3: Using .resize() method
we can use .resize(width, height) method to resize our chart by invoking it using the two parameters as height and the width.
Syntax:
function resize() {
myChart.resize(600, 450);
};Example: The below code example uses the resize() method to set height and width of the chart in chart.js.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
.chart-container {
width: 700px;
height: 450px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
canvas {
display: block;
}
h1 {
color: #2f8d46;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="chart-container">
<h1>GeeksForGeeks Chart Example</h1>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5],
backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4caf50'],
borderColor: ['#ff6384', '#36a2eb', '#ffce56', '#4caf50'],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
function resize() {
myChart.resize(600, 450);
}
resize();
</script>
</body>
</html>
Output:
Output3
Similar Reads
How to Set Height and Width of a Chart in Chart.js ? Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts for web applications. One of the key aspects of chart customization is controlling its dimensions. In this article, we'll explore how to set the height and width of a Chart.js chart.Ch
4 min read
How to Show Values on Top of Bars in Chart.js ? In this article, we will learn how to show values on top of bars for a chart using the ChartJS CDN library.ApproachUse the <canvas> tag to show the bar graph in the HTML template.In the script section of the code, instantiate the ChartJS object by setting the type, data, and options properties
2 min read
How to Customize the Legend in Chart.js ? In this article, we will learn how to customize the legend of a chart using the Chart JS CDN library. The chart legend displays data about the datasets that are appearing on the chart. This legend is customizable as per the users' requirements to enhance the look and feel of the chart in conjunction
5 min read
How to Dynamically Update Values of a Chart in ChartJS ? Chart.js is an open-source free JavaScript library that is used to visualize data-informed charts. Dynamic chart updates are useful in creating interactive and real-time data visualizations. In this article, we will learn about how to dynamically update the values of charts. Using update() methodCha
5 min read
How to Add Text Inside the Doughnut Chart Using Chart.js ? In Chart.JS, we have a doughnut chart to represent the data in slice forms for a more visual and attractive appearance. In the Doughnut Chart, we can place a custom text inside the doughnut chart to make the chart more informative and also help the readers understand the purpose or data doughnut cha
4 min read
How to Hide the X-Axis Label/text that is Displayed in Chart.js ? Chart.js is a popular JavaScript library for creating interactive and visually appealing charts and graphs. By default, Chart.js displays text labels for both the x and y axes but in this article, we will see the different approaches to hiding the x-axis label/text that is displayed in chart.js.Char
3 min read
How to Format X Axis Time Scale Values in ChartJS ? In Chart.js, formatting the x-axis time values involves searching for ways to present temporal data effectively. By default, Chart.js supports time series data and provides powerful options to customize the appearance of time labels on the x-axis. There are several approaches to format x-axis time s
4 min read
How to Create a Horizontal Scrolling Chart.js Line Chart with a Locked Y Axis ? We will learn how to create a horizontal scrolling Chart.js line chart with a locked y-axis using the ChartJS CDN library.ApproachIn the HTML template, use two <canvas> tags: one to show the y-axis which should be locked in place, and the other to show the line chart itself.Create one <div
4 min read
How to Hide y Axis Line in ChartJs ? In Chart.JS we can display our information in visual forms. For the customization of the chart, we can remove or hide the Y-axis line from the Chart appearance as per the requirement. We can use two different approaches to hide the y-axis line in the Chart.JS. We will see the practical implementatio
3 min read
How to Show Labels on Pie Chart in ChartJS ? Pie charts are an attractive way to represent data in an easy-to-understand manner. In the pie chart, the labels are very useful because, with the help of the labels, we can understand what type of data is represented in the chart. Below are the different approaches to show labels on a pie chart: Ta
5 min read