Gap between bars C3.js

2.2k Views Asked by JP. K. At 19 October 2024 at 16:36

I want to put gaps between bars. I tried ; ... bar:{ width: { ratio: 0.5 } }, ... The code above didn't work for me. The question is: why doesn't it work or how can I make it work?

Original Q&A

There are 1 best solutions below

MMK On 30 December 2016 at 16:02

Try some thing like:

 

var colors = ['#1f77b4', '#aec7e8', '#ff7f0e'];


var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['value: ', 20, 14, 3]
    ],
    type: 'bar',
    labels: true,

    color: function(color, d) {
      return colors[d.index];
    }

  },
  axis: {
    x: {
      type: 'category',
      categories: ['cat1', 'cat2', 'cat3']
    }
  },
  bar: {
    width: {
      ratio: 0.5,
    }
  },
  grid: {
    focus: {
      show: false
    }
  }

});

<!DOCTYPE html>
<html>
  <head>        
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
  </head>
  <body>
    <div id="chart"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.js"></script>
  </body>
</html>

Gap between bars C3.js

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in D3.JS

Related Questions in C3.JS

Trending Questions

Popular # Hahtags

Popular Questions