Possible to merge 2 bars in bar chart (chart.js)

user_5625947 0
Viewed 2108

Currently, I have a bar chart with 2 results comparing side to side using chart.js on Rails 5. As shown in the first picture.

Current bar chart

It indicates the current score on left bar and full score on right bar.

But I got the request that the bar charts have to combine and showing the legends for current score and full score.

Ideal Bar chart

Been searching around but it just found stacked bar chart only. Is it possible to combine 2 bars together?

chart.js charts ruby-on-rails ruby javascript
1 Answers

I have found the solution. For Chart.js 2.1.x onwards (it doesn't work Chart.js 1.x.x), you can apply the dataset with custom option as shown below:

var options = {
  scales:{
    xAxes: [{ stacked: true }],
    yAxes: [{ stacked: true }]
  }
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

I'm using the chart js 2.2.1 gem from this source. The helper method from line 3-35 provides the insight on how to create stacked bar chart. Somehow it doesn't have the option to input the data from the method given. So let's override the helper method:

  def chart2_bar id=nil, size=nil, data={}, options={}
    html = "<canvas id=\"myChart_bar\" width=\"#{size[:width]}px\" height=\"#{size[:height]}px\"></canvas>".html_safe
    script = javascript_tag do
      <<-END.html_safe
      var ctx = document.getElementById("myChart_bar");
      var data = "#{data.to_json}";
      var options = "#{options.to_json}";
      var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
      END
    end
    return html + script
  end

The data must be in json format or else it would be treated as string format, and so error. You can create an instance variable and pass into the helper method as usual.

Wouldn't say this is the perfect solution but it works well from generating html and also pdf (using wicked-pdf).

user_56259470
Related