var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 130],
['data3', 130]
],
type: 'bar'
},
bar: {
width: 50,
}
});
Here we have shown datas in three groups into data1,data2 and data3 but the graphs are attached without any spaces like in images
How can we add the space in between the bars?
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 130],
['data3', 130]
],
type: 'bar'
},
bar: {
width: 50,
}
});
Here we have shown datas in three groups into data1,data2 and data3 but the graphs are attached without any spaces like in images
How can we add the space in between the bars?
Share Improve this question asked Nov 23, 2015 at 5:13 dpndradpndra 2,1684 gold badges24 silver badges29 bronze badges4 Answers
Reset to default 9var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 130],
['data3', 130]
],
type: 'bar'
},
bar: {
space: 0.25
}
});
Thanks to @zohaib-ijaz's ment. I came up with:
d3.selectAll(".c3-target-nameofyourclass")
.selectAll(".c3-bar")
.attr("transform", "translate(-5, 0)");
to move the bars from column "nameofyourclass" 5 pixels to the left.
here is the way in c3 to achieve what you want. you are not able to creat space between different columns as per my knowledge.
var chart = c3.generate({
data: {
columns: [
['barData', 30, 130, 130]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
categories: ['data1', 'data2', 'data3']
}
},
bar: {
width: 50,
}
});
Use this
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}