Chartjs-Charts Area JS v2: How to set units?

by

0👍

✅

To access dataset you should use datasetIndex and use label key to use dataset label

var ctx = document.getElementById("myAreaChart");
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
        datasets: [{
          label: "Sales",
          lineTension: 0.3,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(2,117,216,1)",
          pointRadius: 5,
          pointBackgroundColor: "rgba(2,117,216,1)",
          pointBorderColor: "rgba(255,255,255,0.8)",
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgba(2,117,216,1)",
          pointHitRadius: 50,
          pointBorderWidth: 2,
          data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
    
        },{
          label: "Retur",
          lineTension: 0.3,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(240, 52, 52, 1)",
          pointRadius: 5,
          pointBackgroundColor: "rgba(240, 52, 52, 1)",
          pointBorderColor: "rgba(255,255,255,0.8)",
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgba(240, 52, 52, 1)",
          pointHitRadius: 50,
          pointBorderWidth: 2,
          data: [5000, 30200, 26626, 1899, 18218, 2818, 31127, 33525, 25184, 24115, 32615, 31198, 38145],
        }] 
    }, 
    options: {
        scales: {
          xAxes: [{
            time: {
              unit: 'date'
            },
            gridLines: {
              display: false
            },
            ticks: {
              maxTicksLimit: 7
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              max: 40000,
              maxTicksLimit: 5
            },
            gridLines: {
              color: "rgba(0, 0, 0, .125)",
            }
          }],
        },
        legend: {
          display: false
        },
        tooltips:{
          callbacks:{
            label: (ttItem, items) => (`${items.datasets[ttItem.datasetIndex].label}: Rp. ${items.datasets[ttItem.datasetIndex].data[ttItem.index]}`)
          } 
        }
      }
    });
<canvas id="myAreaChart" width="100%" height="30"></canvas>

Leave a comment