CODEWITHSUNDEEP
bar-chartc3.js
Drii7
Drii7

Reputation: 121

C3 chart tick values position

I'm building a chart with c3.js. This is what I have so far: Image1

It is a chart with horizontal bar, so the x axis is rotated. I would like to change the position of the ticks (tick 1, tick 2, tick 3) to have something like this: Image 2

Is this possible to do with c3? I didn't find anything on the references.

Thank you!

Upvotes: 2

Views: 662

Answers (1)

psycat
psycat

Reputation: 513

I needed such functionality too so I came with the following solution:

  • find all top-most bars (bars are represented as <path> elements) in the DOM. (top-most, because if you have multiple bars in a category, then you'll want to put the tick above the highest one in the category).

  • for each bar found in the previous step: look at d attribute of the element and parse the y coordinate from it. (the d attribute defines how the bar should be drawn and it looks like M 0,27.4 L503.45454545454544,27.4 L503.45454545454544,67 L0,67 z, so in this case we interested in 27.4). Store all the coordinates in array.

  • insert container element (<g>) into the DOM to hold all ticks together

  • for each tick, create <text> element and assign the corresponding y from the coordinates array as the y attribute.

jsbin: https://jsbin.com/mumuhoq/3/edit?html,js,output

Upvotes: 0

Related Questions