Chartkick Chart Charts Multiple Colors

Question

I use chartckick in my RoR project to create charts, which works pretty well. (along with Google Chart).

I created a bar chart with just 2 bars (male and female).

And now the client wants each bar to have a different color? Is it possible?

I saw this post - How do I change the color of a bar chart created using Chartkick? but it’s more than half a year, and I am hoping that now it is possible to specify more colors for the bars.

Update

My code looks like this:

controller

@followers_gender_count = Project.find(params[:id]).followers.group(:gender).count

View

<%= column_chart parse_gender_data(@followers_gender_count) %>

Assistant

def parse_gender_data(data)
  gender_data = Hash.new
  gender_data[:male] = data[1]
  gender_data[:female] = data[2]
  ({ 'Male' => gender_data[:male], 'Female' => gender_data[:female] })
end

Update 2 - Problem with GitHub

Answer 1

@buren GitHub , JSON column_cart.

---

:

def parse_gender_data(data)
  gender_data = Hash.new
  gender_data[:male] = data[1]
  gender_data[:female] = data[2]
  [{"name" => "Male","data" => {"Gender" => gender_data[:male]}},{"name" => "Female","data" => {"Gender" => gender_data[:female]}}]
end

---

chartkick.rb config (config/initializers/chartkick.rb), :

Chartkick.options = {
  colors: ["#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8"]
}

---

:

Answer 2

. ( chartkick.rb), , :

  def networth_data
    [
      {name: "Assets", data: {"NetWorth": 6979.53}}, 
      {name: "Liabilities", data: {"NetWorth": 10532.32}}
    ]
  end

html.erb , :

<%= column_chart networth_data, 
  colors: ["green", "#FF0000"], 
  library: {backgroundColor: "#FFF", height: 265} %>

... :

Answer 3

ColumnStyles

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2010', 14, 'color: #76A7FA'],
        ['2020', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

but look at the link, there are really cool things.