morrisjs / morris.js

Pretty time-series line graphs

Home Page:http://morrisjs.github.com/morris.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is it possible to group in bar chart?

SoftCircuits opened this issue · comments

(BTW, it's currently not possible to view any of the samples on JS Bin. The message "This bin needs a pro account" is displayed.)

But we have the need to group bar charts. Specifically, I want two show two related bars next to each other. Is this supported?

Hello,

Yes, you can play with the options barGap and barSizeRatio.

With barSizeRatio: 0.7 and barGap: 0, you should get something like:

WX20220528-104511

@pierresh Thanks, but I don't see anything about barSizeRatio or barGap on the documentation page. Any chance you could post a simple example?

Not all the options are described in the documentation, you can see them in the file lib/morris.bar.coffee around line 17.

Here is an example:

Morris.Bar({
      element: 'chart_hist_3',
      data: [
        {team: 'Brazil', nb: 5, avg: 2.2},
        {team: 'Italy', nb: 4, avg: 1.9},
        {team: 'Germany', nb: 4, avg: 2.1},
        {team: 'Uruguay', nb: 2, avg: 1.4},
        {team: 'Argentina', nb: 2, avg: 1.8},
      ],
      xkey: 'team',
      ykeys: ['nb', 'avg'],
      barSizeRatio: 0.7,
      barGap: 0,
      dataLabels: false,
      labels: ['Editions Wins', 'Average Points'],
    });

Thanks, I'll play with that.