Reverse graph direction to horizontal on c3js

Asked

Viewed 62 times

-2

I’m using the c3js framework, as I change the direction of the graph?

my current code.

    var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
        ],
        types: {
            data1: 'bar',
        }
    },
});
javascript

1 answer

5

To change the position of the x and y axes use axis.rotated.

Standard: false

Format:

axis: {
  rotated: true
}

Source

Example

var chart = c3.generate({
  bindto: '#chart',
  padding: {
    left: 60
  },
  data: {
    x: 'x',
    columns: [
      ['x', 'Category1', 'Category2'],
      ['value', 300, 400]
    ],
    type: 'bar'
  },
  axis: {
    rotated: true,
    x: {
      type: 'category'
    }
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">

<div id="chart"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.