[Chartjs]-How to remove transparency from bar charts?

by

3👍

For two different color with two data-set for proper data comparison Check code snippet

 //START Common for all chart
 var legend = {
     display: true,
     position: 'bottom',
     labels: {
         fontColor: '#000'
     }
 };
 //END Common for all chart

 //Dataset
 var data1 = {
     label: 'Dataset 1',
     data: [4, 6, 3, 5, 2, 3],
     backgroundColor: 'rgba(255, 99, 132, 1)', //Set 1 for remove transparency
     borderColor: 'rgba(255, 99, 132, 1)',
     borderWidth: 1
 };
 var data2 = {
     label: 'Dataset 2',
     data: [5, 2, 3, 4, 6, 3],
     backgroundColor: 'rgba(54, 162, 235, 1)', //Set 1 for remove transparency
     borderColor: 'rgba(54, 162, 235, 1)',
     borderWidth: 1
 };
 var Dataset = [data1, data2]
 // Dataset
 //START Bar chart


 var option = {
     scales: {
         yAxes: [{
             gridLines: {
                 offsetGridLines: true
             },
             categorySpacing: 5,
             ticks: {
                 beginAtZero: true
             }
         }]
     },
     responsive: true,
     //maintainAspectRatio: false,
     legend: legend,
     //onClick: LoadDataInDetails
 }
 var ctx = document.getElementById('myChart').getContext('2d');
 var myChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
         datasets: Dataset
     },
     options: option
 });
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

0👍

OK, it seems that only RGB colours can be passed into column_chart() (correct me if I’m wrong). This is what I ended up with:

<%=
  column_chart(
    [
      {:data => @invoices},
      {:data => @payments}
    ],
    :id => "chart",
    :stacked => true,
    :colors => [to_rgba("#E91E63"), to_rgba("#003366")],
    :legend => false,
    :dataset => {:borderWidth => 0}
  )
%>

module ColorHelper

  def to_rgba(hex_value)
    opacity = 1
    hex_value = hex_value.gsub('#', '')
    rgb_values = hex_value.scan(/../).map{ |x| x.hex }
    rgb_values << opacity
    "rgba(#{rgb_values.join(',')})"
  end

end

Not perfect, but it gets the job done.

Leave a comment