const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 500, max: 3000};
const ctx = document.getElementById('chartBankSampah').getContext('2d');
var gradientBSI = ctx.createLinearGradient(0, 0, 0, 1000);
gradientBSI.addColorStop(0, "rgba(36, 115, 50, 1)");  // hijau gelap
gradientBSI.addColorStop(1, "rgba(136, 194, 147, 1)");  // hijau muda

var gradientBSU = ctx.createLinearGradient(0, 0, 0, 1000);
gradientBSU.addColorStop(0, "rgba(56, 107, 202, 1)");  // biru gelap
gradientBSU.addColorStop(1, "rgba(138, 164, 242, 1)");  // biru muda

var gradientOfftaker = ctx.createLinearGradient(0, 0, 0, 1000);
gradientOfftaker.addColorStop(0, "rgba(247, 144, 9, 1)");  // orange
gradientOfftaker.addColorStop(1, "rgba(255, 219, 172, 1)");  // kuning lembut
const labels = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

const data = {
  labels: labels,
  datasets: [
    {
      label: 'BSI',
      data: 
      [
        500,
        500,
        500,
        500,
        500,
        500,
        500,
        500,
        500,
        500,
        500,
        500,

      ],
      borderColor: '#247332',
      backgroundColor: gradientBSI,
    },
    {
      label: 'BSU',
      data:[
        800,
        800,
        800,
        800,
        800,
        800,
        800,
        800,
        800,
        800,
        800,
        800,
      ],
      borderColor: '#386BCA',
      backgroundColor: gradientBSU,
    },
    {
      label: 'Offtaker',
       data:[
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
        2000,
      ],
      borderColor: '#F79009',
      backgroundColor: gradientOfftaker,
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio:false,
    plugins: {
        legend: {
            position: 'bottom',
        },
    },
    scales: {
        y: {
            beginAtZero: true,
            max: 4000        // <--- atur batas tertinggi chart
        }
    }
  },
};

const myChart = new Chart(ctx, config);