c3 scaling similar to d3?

Question

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

Answer 1

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.