Bar Chart Highchart.JS to C3.JS

Question

I need to convert this Highcharts.JS chart to C3.JS chart

http://i.imgur.com/iwk3pyO.png

This was the Highcharts.JS code:

var chart = new Highcharts.Chart({

xAxis: {
    title: {
        text: 'Values'
    }
},

yAxis: {
    title: {
        text: ' Frequency',
        align: 'high',
        offset: 23
    }
},

legend: {
    enabled: false
},

tooltip: {
    enabled: false
},

series: [
    {
        data: []
    }
]

});

Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:

var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];

I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.

https://jsfiddle.net/joefclarin/dh5epj0v/

Answer 1

Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:

Instead of

regions: [
    {start: 0, end: 1, class: 'red-color'}
]

You need to hack the end value according to how many items are less than 1 in your categories? . You code would be probably like this:

function fctGetItemLessThan1(xData){
    //implement your count logic here + return value
}

then in your chart option:

...
regions: [
    {start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...

In your case, fctGetItemLessThan1() - 1 = 9 , the result is as follow