I'm trying to create a chart with percentages in c3.js, but the y axis range seems to be broken. No matter what I do, the min/max values seem to to add 15 to what I enter.
The code included below plots things from 0 to ~15. If I set the y max to 10, it starts to go up to 25. It is infuriating.
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['PC', 0.038, 0.067],
['Tablet', 0.038, 0.056],
['Mobile',0.027,0.039]
],
type: 'bar',
labels: {
format: {
y: d3.format(".1%"),
}}
},
axis: {
x: {
type: 'categorized',
categories: ['Unique Click Rate','Total Click Rate']
},
y: {
max: .1,
min: 0
}
},
bar: {
width: {
ratio: 0.5,
},
}
});
setTimeout(function () {
chart.data.colors({PC: '#2C9AB7',Tablet: '#FEBE12', Mobile: '#DB3A1B'});
}, 1000);
</script>
Found out that the axis has a default padding value. This code fixed it.
y: {
max: .1,
min: 0,
padding: {top: 0, bottom: 0}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With