Chart.js Maker

Markdown Table to List

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
        }
      }
    }
  });
}

Markdown Table to List

Chart.js Preview

Defalt Color