I have used c3 to make some graphs and am impressed with its ease of use. However, I'm not sure if it is possible to a 3 value scaling like you can in d3 like the code below:
var yScale= d3.scale.linear()
.domain([0,100,500])
.range([height, height - 20, 0]);
so then i can make my graphs scaled mainly for values below 100 since this is where the majority of values will be and I don't want the bars scale to be skewed by values exceeding 100.
Is it possible to do something like this in c3? or do I need to use d3 to get this sort of scaling?
Thanks
You could use a scale to map the value and scale.invert to get all the labels. For example...
var myScale = d3.scale.linear().domain([0, 5, 50]).range([0, 40, 50]);
var chart = c3.generate({
data: {
columns: [
['A', 3, 2, 1, 4, 1.5, 42.5].map(function (value, index) {
return index ? myScale(value) : value;
})],
type: 'spline'
},
tooltip: {
format: {
value: function (value) {
return parseFloat(myScale.invert(value).toFixed(5));
}
}
},
axis: {
y: {
tick: {
format: function (d) {
return myScale.invert(d)
}
}
}
}
});
The parseFloat and toFixed is to get rid of precision problems when you convert back and forth.
Fiddle - http://jsfiddle.net/rujx39fw/
There is a similar issue on the c3 github at https://github.com/masayuki0812/c3/issues/252 . It was closed with a similar workaround (there is a linked question too - that was closed by referencing this workaround)
There is also a related question you may be interested in at https://github.com/masayuki0812/c3/issues/971 that suggests another option, if you are feeling adventurous.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.