Performance
Chart.js charts are speedily rendered thanks to their utilization of canvas elements. This choice of rendering contributes to swift performance, allowing for the creation of dynamic and visually appealing charts.
Data Structure and Format
- parsing: Converting raw data into a format understandable by Chart.js for efficient processing and rendering.
- normalization of data: Standardizing data to a common scale or format, ensuring consistency and accuracy in chart representation.
- Decimation: Reducing the number of data points displayed in a chart for improved performance without sacrificing essential information.
Example 1: In this example, we will decimate a large data and create a line chart. It will create a simple chart, which will display the subset of a large dataset.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Decimated Line Chart</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < canvas id = "myChart" width = "500" height = "300" > </ canvas > < script > // Example large dataset const rawData = Array.from({ length: 1000 }, (_, i) => ({ x: i, y: Math.random() * 100 })); // Decimation function function decimateData(data, nth) { return data.filter((_, i) => i % nth === 0); } // Decimating the dataset const decimatedData = decimateData(rawData, 10); // Chart data with color options const data = { datasets: [{ label: 'My Dataset', data: decimatedData, borderColor: 'rgb(75, 192, 192)', // Line color backgroundColor: 'rgba(75, 192, 192, 0.5)', // Fill color fill: false, // Disable filling under the line }] }; // Chart configuration const config = { type: 'line', data: data, options: { scales: { x: { type: 'linear', position: 'bottom' } } } }; // Initializing the chart new Chart( document.getElementById('myChart'), config ); </ script > </ body > </ html > |
Output:
Example 2: In this example, we are using some styling options like backgroundColor, borderColor, etc. It will create a line chart of a smaller dataset as compared to the previous example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Styled Line Chart</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > < style > /* Adding some basic styling to the body */ body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } </ style > </ head > < body > < canvas id = "myChart" width = "600" height = "200" > </ canvas > < script > // Sample dataset const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Monthly Sales', data: [12, 19, 3, 5, 2, 3, 9], fill: false, borderColor: 'green', // Border color backgroundColor: 'green', // Background color for points pointBorderColor: 'grren', // Border color for points pointBackgroundColor: '#fff', // Fill color for points pointBorderWidth: 2, tension: 0.1 // Bezier curve tension }] }; // Chart configuration const config = { type: 'line', data: data, options: { scales: { y: { beginAtZero: true } }, plugins: { legend: { labels: { color: 'Green', // Color for labels font: { size: 14 // Font size } } } } } }; // Initializing the chart new Chart( document.getElementById('myChart'), config ); </ script > </ body > </ html > |
Output:
Charts.js General
Chart.js General Accessibility ensures the accessibility rendered on user-provided canvas elements. Users can add accessibility features like ARIA attributes or fallback content within the canvas elements. This ensures that the content of the canvas, and chart information is accessible to all the user who relies on assistive technologies.
Accessible canvas
elements
role
="img":
indicates that the canvas should be treated as an image, suitable for contexts where the canvas represents graphical content.aria-label:
provides a text description of the content or purpose of the canvas, enhancing accessibility for users who rely on screen readers.
Contact Us