CODEWITHSUNDEEP
javascriptgraphc3.js
Raghbendra Nayak
Raghbendra Nayak

Reputation: 1646

Chart X-Axis tick in c3 charts

I am using C3 bar charts now I am facing problem with X-Axis tick. I am taking value of X-Axis dynamically.

See below code:

chart = c3.generate({
    bindto: '#port_range_to_port_range',
    data: {
        x: 'x',
        columns: [
            ['x','Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Chennai', 'Chennai', 'Chennai'],
            ['Your lowest rate', 530, 800, 900, 525, 190],
            ['Benchmark rate', 241, 890,  254, 100, 149],
            ['Lowest rate on route',200, 859, 256, 365, 410],
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
            tick: {
                format: d3.format("$,")
            }
        }
    },
    legend: {
        show: false
    }
});

You can see the above I have used "Chennai" three times in X-axis. See below for more 

 columns: [
            ['x','Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Chennai', 'Chennai', 'Chennai'],

So problem is, when graph will plot then these duplicate value is not displaying, This (Chennai) is displaying only one time and rest times its printing the numbers. See attached graphenter image description here

Upvotes: 0

Views: 1213

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

As we figured out in comments above, since 0.4.11 c3.js starts to group same categories into one.

Fast workaround is either use previous version, or add extra spaces to category name to make them actually differ but stay visually identical:

columns: [['x',
    'Ho Chi Minh City',
    'Tanjung Priok (Jakarta)',
    'Chennai',
    'Chennai ', // <-- here
    'Chennai  ' // <-- and here
],

If you want to do it dynamically, more appropriate solution may be adding index to repeating categories:

columns: [['x', ... some dynamic data ]
    .map(function(category, i, arr){ 
      var prev = arr.slice(0, i); 
      var count = prev.reduce(function(sum, item) { 
        if (item === category) return sum + 1;
        else return sum;
      }, 0); 

      if (count != 0) return category + '-' + count;
      else return category;
    })
]

// will give you 
// [['x', 'Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 
// 'Chennai', 'Chennai-1', 'Chennai-2']]

See updated fiddle

Upvotes: 1

Related Questions