How to remove transparency from bar charts? - ruby

Question

I wonder if there's any way to remove opacity from bar charts built with Chartkick in combination with ChartJS? They always appear semi-transparent, no matter what I do.
This is what I've got so far:
<%=
column_chart(
[
{:data => #invoices},
{:data => #payments}
],
:id => "chart",
:stacked => true,
:colors => ["#E91E63", "#003366"],
:legend => false,
:dataset => {:borderWidth => 0}
)
%>
Thanks for any help.

Answer 1

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>

Answer 2

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.