My Chart<\/title> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script> <\/head> <body> <div style="width: 800px; height: 600px"> <canvas id="myChart"><\/canvas> <\/div> <script> const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', \/\/ or 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter' 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, 205, 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, 205, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); <\/script> <\/body> <\/html> ``` ## Common Chart Types ### Bar Chart ```javascript const config = { type: 'bar', data: data, options: { responsive: true, scales: { y: { beginAtZero: true } } } }; ``` ### Line Chart ```javascript const config = { type: 'line', data: data, options: { responsive: true, plugins: { title: { display: true, text: 'Chart Title' }, }, scales: { y: { beginAtZero: true } } } }; ``` ### Pie Chart ```javascript const config = { type: 'pie', data: data, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Chart Title' } } } }; ``` ### Doughnut Chart ```javascript const config = { type: 'doughnut', data: data, options: { responsive: true, plugins: { legend: { position: 'top', } } } }; ``` ### Scatter Plot ```javascript const config = { type: 'scatter', data: { datasets: [{ label: 'Scatter Dataset', data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }], backgroundColor: 'rgb(255, 99, 132)' }], }, options: { responsive: true, scales: { x: { type: 'linear', position: 'bottom' } } } }; ``` ## Data Format ### For categorical charts (bar, line, radar): ```javascript const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }; ``` ### For scatter plots and bubble charts: ```javascript const data = { datasets: [{ label: 'My First Dataset', data: [ {x: 10, y: 20}, {x: 15, y: 10}, {x: 25, y: 30} ], backgroundColor: 'rgb(255, 99, 132)' }] }; ``` ### For bubble charts: ```javascript const data = { datasets: [{ label: 'My First Dataset', data: [ {x: 20, y: 30, r: 15}, {x: 40, y: 10, r: 10}, {x: 15, y: 5, r: 20} ], backgroundColor: 'rgb(255, 99, 132)' }] }; ``` ## Styling Options ### Colors - `backgroundColor`: Fill color for shapes - `borderColor`: Border color for shapes - `pointBackgroundColor`: Color of data points - `pointBorderColor`: Border color of data points ### Scales Configuration ```javascript options: { scales: { x: { display: true, title: { display: true, text: 'Month' } }, y: { display: true, title: { display: true, text: 'Value' }, beginAtZero: true } } } ``` ### Plugins - `title`: Chart title - `legend`: Legend display - `tooltip`: Interactive tooltips - `datalabels`: Labels on data points ## Responsive Design To make charts responsive: ```javascript options: { responsive: true, maintainAspectRatio: false \/\/ This allows the chart to fill the container } ``` ## Saving Charts Charts can be saved as images: ```javascript \/\/ Get the base64 string of the chart const url = myChart.toBase64Image(); \/\/ Or download directly const link = document.createElement('a'); link.download = 'chart.png'; link.href = myChart.toBase64Image(); link.click(); ``` ## Canvas Container Always wrap the canvas in a div with specific dimensions: ```html <div style="width: 800px; height: 600px"> <canvas id="myChart"><\/canvas> <\/div> ``` ## Common Options ### Animation ```javascript options: { animation: { duration: 2000, \/\/ Duration in ms easing: 'easeInOutQuart' } } ``` ### Interaction ```javascript options: { interaction: { intersect: false, mode: 'index' } } ``` ## Tips for Effective Visualization 1. Choose the right chart type for your data 2. Use contrasting colors for better visibility 3. Include titles and axis labels for clarity 4. Limit the number of data series for readability 5. Use tooltips to provide additional information 6. Consider responsive design for different screen sizes 7. Add legends when multiple data series are present</article></body></html>

--- name: chartjs description: Create interactive data visualizations using Chart.js library. Use when Codex needs to visualize data in browser with bar charts, line charts, pie charts, scatter plots, and other chart types. --- # Chart.js Visualization Skill Use this skill to create interactive data visualizations in the browser using the Chart.js library. This skill enables creating various chart types including bar charts, line charts, pie charts, doughnut charts, radar charts, polar area charts, bubble charts, and scatter plots. ## Getting Started Chart.js is a JavaScript library that creates responsive, interactive charts. It works with the HTML5 canvas element and provides a range of customization options. ## Basic Chart Structure ```html My Chart<\/title> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script> <\/head> <body> <div style="width: 800px; height: 600px"> <canvas id="myChart"><\/canvas> <\/div> <script> const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', \/\/ or 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter' 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, 205, 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, 205, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); <\/script> <\/body> <\/html> ``` ## Common Chart Types ### Bar Chart ```javascript const config = { type: 'bar', data: data, options: { responsive: true, scales: { y: { beginAtZero: true } } } }; ``` ### Line Chart ```javascript const config = { type: 'line', data: data, options: { responsive: true, plugins: { title: { display: true, text: 'Chart Title' }, }, scales: { y: { beginAtZero: true } } } }; ``` ### Pie Chart ```javascript const config = { type: 'pie', data: data, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Chart Title' } } } }; ``` ### Doughnut Chart ```javascript const config = { type: 'doughnut', data: data, options: { responsive: true, plugins: { legend: { position: 'top', } } } }; ``` ### Scatter Plot ```javascript const config = { type: 'scatter', data: { datasets: [{ label: 'Scatter Dataset', data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }], backgroundColor: 'rgb(255, 99, 132)' }], }, options: { responsive: true, scales: { x: { type: 'linear', position: 'bottom' } } } }; ``` ## Data Format ### For categorical charts (bar, line, radar): ```javascript const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }; ``` ### For scatter plots and bubble charts: ```javascript const data = { datasets: [{ label: 'My First Dataset', data: [ {x: 10, y: 20}, {x: 15, y: 10}, {x: 25, y: 30} ], backgroundColor: 'rgb(255, 99, 132)' }] }; ``` ### For bubble charts: ```javascript const data = { datasets: [{ label: 'My First Dataset', data: [ {x: 20, y: 30, r: 15}, {x: 40, y: 10, r: 10}, {x: 15, y: 5, r: 20} ], backgroundColor: 'rgb(255, 99, 132)' }] }; ``` ## Styling Options ### Colors - `backgroundColor`: Fill color for shapes - `borderColor`: Border color for shapes - `pointBackgroundColor`: Color of data points - `pointBorderColor`: Border color of data points ### Scales Configuration ```javascript options: { scales: { x: { display: true, title: { display: true, text: 'Month' } }, y: { display: true, title: { display: true, text: 'Value' }, beginAtZero: true } } } ``` ### Plugins - `title`: Chart title - `legend`: Legend display - `tooltip`: Interactive tooltips - `datalabels`: Labels on data points ## Responsive Design To make charts responsive: ```javascript options: { responsive: true, maintainAspectRatio: false \/\/ This allows the chart to fill the container } ``` ## Saving Charts Charts can be saved as images: ```javascript \/\/ Get the base64 string of the chart const url = myChart.toBase64Image(); \/\/ Or download directly const link = document.createElement('a'); link.download = 'chart.png'; link.href = myChart.toBase64Image(); link.click(); ``` ## Canvas Container Always wrap the canvas in a div with specific dimensions: ```html <div style="width: 800px; height: 600px"> <canvas id="myChart"><\/canvas> <\/div> ``` ## Common Options ### Animation ```javascript options: { animation: { duration: 2000, \/\/ Duration in ms easing: 'easeInOutQuart' } } ``` ### Interaction ```javascript options: { interaction: { intersect: false, mode: 'index' } } ``` ## Tips for Effective Visualization 1. Choose the right chart type for your data 2. Use contrasting colors for better visibility 3. Include titles and axis labels for clarity 4. Limit the number of data series for readability 5. Use tooltips to provide additional information 6. Consider responsive design for different screen sizes 7. Add legends when multiple data series are present</article></body></html>