JavaScript
/* CONFIG SECTION
min nos of bars = 5
max nos of bars = 20
Steps to config:
1. edit the below 3 variables
2. press on run
3. play with the graph on the right , resize the subchart , drag it around , have fun and send me the nos combinations that worked for you best!
*/
var multiLine = false; //should ticks go to second line either true or false
var maxCharSize = 20; //max nos of chars to show
var nosOfDots = 2; //nos of dots you want in the ellipsis
var stepSize = 5; //this determines the number of breakpoints at every step i.e. for 5, breakpoints will be at 5 , 10 , 15 and 20 nos of bars , try values
var cullingLimitOnMaxBars = 5; //when the user is on 20 bars how many labels to show
var maxDataPoints = 100;
var maxSubchartSize = 20;
/*--------- CONFIG SECTION ENDS -------------------------*/
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'pepsi','Game of thrones', 'coke', 'haywards','KahaniHarGharKi', 'drink', 'jack daniels', 'black dog','Friends','Breaking Bad','Saas bhi kabhi bahu thi','Narendra Modi','Donald Trump','Guns and Roses','Pearl Jam','BruceSpringsteen','Neil Young','R D Burman','Led Zeppelin', 'AC/DC','Noori','Junoon','Dilwale Dulhania le jayenge','IKnowWhatYouDidLastSummer','Eagles','Avengers','PrisonBreak'],
['sample', 30, 200, 100, 400, 150, 250,280,300,320,350,110,200,300,80,160,300,40,200,330,40,120,260,380,200,300,310,400]
]
},
axis : {
x : {
extent: [0,5],
type : 'category',
tick: {
multiline: multiLine,
culling: {
max: maxDataPoints
},
format: function (x) {
var value , totalBars ,length , substrLimit;
function stringEllipsis(charsToShow , nosOfDots) {
return this.toString().substring(0,charsToShow) +...