Chart.js Maker Create stunning charts with AI Image Journey's Chart.js Maker. Convert Markdown tables to Chart.js code, preview and download Chart as PNG. Easy, customizable, and interactive. This page uses JavaScript. Please enable JavaScript. Markdown Table to List | | SDXL | AuraFlow | Flux.1 | HiDream | | --- | --- | --- | --- | --- | | Power | 153.7 | 119.8 | 117.2 | 80.7 | | GPU Temperature | 78 | 68 | 67 | 58 | Chart.js Preview function createChart1() { const ctx = document.getElementById('chartjs1').getContext('2d'); chartInstance = new Chart(ctx, { type: 'bar', data: { labels: ['SDXL', 'AuraFlow', 'Flux.1', 'HiDream'], datasets: [ { label: 'Power (W)', data: [153.7, 119.8, 117.2, 80.7], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgb(54, 162, 235)', borderWidth: 1 }, { label: 'GPU Temperature (\u2103)', data: [78, 68, 67, 58], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', borderWidth: 1 } ] }, options: { indexAxis: 'y', aspectRatio: 0.71, scales: { x: { min: 0, max: 200, grid: { display: false } }, y: { grid: { display: false } } }, plugins: { legend: { display: true }, title: { display: true, text: 'Power and GPU Temperature Comparison' }, datalabels: { anchor: 'end', align: 'right', offset: 8 } } } }); } Copy Download (PNG) Defalt Color color example borderColors 'rgb(255, 99, 132)', // Red 'rgb(255, 159, 64)', // Orange 'rgb(255, 205, 86)', // Yellow 'rgb(75, 192, 192)', // Cyan 'rgb(54, 162, 235)', // Blue 'rgb(153, 102, 255)' // Purple 'rgb(201, 203, 207)', // Gray backgroundColors 'rgba(255, 99, 132, 0.2)', // Red 'rgba(255, 159, 64, 0.2)', // Orange 'rgba(255, 205, 86, 0.2)', // Yellow 'rgba(75, 192, 192, 0.2)', // Cyan 'rgba(54, 162, 235, 0.2)', // Blue 'rgba(153, 102, 255, 0.2)' // Purple 'rgba(201, 203, 207, 0.2)', // Gray Top Page