CODEWITHSUNDEEP
javascripthtmlpositioningc3.js
cjr
cjr

Reputation: 520

Aligning external elements based on coordinates from a c3 bar chart

I'm attempting to do an overlay over a c3 bar chart. I've got the coordinates of the bars and where I wish to place some customization DOM elements but the issue I am running into is that it does align correctly with the bar.

Here is a jsfiddle of my attempt. 

var label = document.createElement("p");
var text = document.createTextNode("This is 0");
label.style.top = chart.internal.height - chart.internal.x(0) + "px"
label.style.position = "relative";
label.appendChild(text);
document.getElementById("chart").appendChild(label);

http://jsfiddle.net/cjrobinson/thuwbL96/

Upvotes: 0

Views: 57

Answers (1)

mgraham
mgraham

Reputation: 6207

Just needs to be absolutepositioning rather than relative, after that you'll have to adjust it by a few pixels to vertically centre them in the bar

http://jsfiddle.net/thuwbL96/7/

Upvotes: 1

Related Questions