CODEWITHSUNDEEP
javascriptd3.jsgraphc3.js
Hunter1010
Hunter1010

Reputation: 85

C3.js x-axis show every other categories

in my data, I have: data = [d1, d2, d3, d4, d5, d6, ...., d100]; (d1-d100 are int or float) labels = [v1, v2, v3, ..., v100]; (v1 - v100 are strings, categories in C3.js)

Because there are 100 labels and hard to show all of them on x-axis, I only want to show every 5th or every 10th.

If labels are integer, I can use culling in ticks; If labels are time, I can use count in ticks; But I didn't see any solution for categories.

I tried to make invisible label as an empty string "", but in the C3 graph, the visible labels cannot show correctly, since empty strings takes space in the graph, even they are empty.

I did the same thing in D3.js. But I don't want to use d3.js because some other feature in C3.js is better.

Any better solution?

Upvotes: 2

Views: 4781

Answers (1)

Sean
Sean

Reputation: 15164

Have you tried using axis.x.tick.culling.max?

tick: {
    culling: {
        max: 2 // or whatever value you need
    }

If you wanted every 5th tick to show and had 100 ticks in total, you'd set the value of max to be equal to 100/5, i.e. 20.

Here's a basic fiddle: http://jsfiddle.net/Ln83xd1k/4/

EDIT

To get the x-axis label to NOT wrap onto multiple lines when there isn't enough space, try adding axis.x.tick.multiline = false, like so:

axis: {
        x: {
            type: 'category',
            categories: ['long category name goes here', 'cat2', 'cat3', 'cat4', 'cat5', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx'],
            tick: {
                multiline:false,
                culling: {
                    max:2
                }
            }
        }
    }

Upvotes: 4

Related Questions