CODEWITHSUNDEEP
javascriptchartschart.js
artiest
artiest

Reputation: 592

create different labels for different data chart js

im trying to create different labels for different data

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels:['total','profit','income'],
    datasets: [{
        label: 'total price',
        data: [1000],
        backgroundColor:backgroundColorPrice,
        borderColor:borderColorPrice,
        borderWidth,
        fill
      },
      {
        label: 'total profit',
        data: [900],
        backgroundColor:backgroundColorProfit,
        borderColor:borderColorProfit,
        borderWidth,
        fill
      },  
      {
        label: 'total income',
        data: [1300],
        backgroundColor:backgroundColorIncome,
        borderColor:borderColorIncome,
        borderWidth,
        fill
      },             
    ]
},
  options: {
    tooltips: {
      mode: 'index',
      intersect: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

im trying to give each labels to each data , for example : total label for total price and profit label for total profit and so on ?! is it possible please thank you

Upvotes: 1

Views: 369

Answers (2)

LeeLenalee
LeeLenalee

Reputation: 31351

Expanding on ikhvjs answer, if you set the tooltip mode to point it will only show the tooltip for the bar you are currently hovering and thus not show the zero values:

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels: ['total', 'profit', 'income'],
    datasets: [{
        label: 'total price',
        data: [1000, 0, 0],
        backgroundColor: "red",
        borderColor: "red",
      },
      {
        label: 'total profit',
        data: [0, 900, 0],
        backgroundColor: "blue",
        borderColor: "red",
      },
      {
        label: 'total income',
        data: [0, 0, 1300],
        backgroundColor: "green",
        borderColor: "red",
      },
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'point',
        intersect: false
      },
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

Upvotes: 2

ikhvjs
ikhvjs

Reputation: 5937

Is this what you want?

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels:['total','profit','income'],
    datasets: [{
        label: 'total price',
        data: [1000,0,0],
        backgroundColor:"red",
        borderColor:"red",
      },
      {
        label: 'total profit',
        data: [0,900,0],
        backgroundColor:"blue",
        borderColor:"red",
      },  
      {
        label: 'total income',
        data: [0,0,1300],
        backgroundColor:"green",
        borderColor:"red",
      },             
    ]
},
  options: {
    tooltips: {
      mode: 'index',
      intersect: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

Upvotes: 2

Related Questions