How to use Inline Configuration In JavaScript
You can set the canvas size directly within the HTML canvas element using the width and height attributes.
Syntax:
<canvas id="myChart" width="400" height="200"></canvas>
Example: The below code uses the inine configuration to set size of canvas for every type of chart.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; } /* Center the canvas */ #chartContainer { text-align: center; } </style> <script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <title> Inline Configuration - Chart.js </title></head><body> <div id="chartContainer"> <!-- Canvas with Inline Configuration --> <h1>w3wiki</h1> <!-- Canvas --> <canvas id="inlineChart" width="800" height="400"> </canvas> <p> Example of "Using Inline Configuration" </p> </div> <script> // Chart Data let data = { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Monthly Sales', data: [12, 19, 3, 5, 2], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }; // Chart Configuration let config = { type: 'bar', data: data, options: { responsive: false, maintainAspectRatio: false, } }; // Create Chart let ctx = document. getElementById('inlineChart'). getContext('2d'); let inlineChart = new Chart(ctx, config); </script></body></html> |
Output:
Output of Inline Configuration
How to Set the Size of Canvas for Every Type of Chart ?
In this article, we will learn various approaches to setting the size of the canvas for different chart types using Chart.js. When you work with charting libraries like Chart.js, one common requirement is to customize the size of the canvas for different types of charts.
There are multiple ways to set the canvas size in Chart.js:
Table of Content
- Using Inline Configuration
- Using JavaScript Options
- Using the CSS Styling
Chart.js CDN Link
Include the below chart.js CDN in your HTML document.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>