Chartjs-Transparentize some bars of dataset in ChartJS

by

1👍

✅

You can define the backgoundColor as an array of colors created with the rgba() function. The forth parameter of rgba() defines the transparency.

Please take a look at below runnable code and see how it works.

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'My Dataset',
      data: [2, 5, 3, 4],
      backgroundColor: ['rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 0.5)', 'rgba(54, 162, 235, 0.5)']
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
<canvas id="myChart" height="120"></canvas>

Note that instead of rgba(54, 162, 235, 1), you can also simply use rgb(54, 162, 235) to represent the solid blue color.

Leave a comment