Clever Geek Handbook

Title for charts and axes in dimple.js charts

how to add title to dimple.js diagrams? I want to update the title of my charts and axes. I am using dimple.js. Please advise.

+3


source to share


2 answers


You can add a header with a little d3. Here is an example of a center name. For simplicity, I've put the style in d3, but it would probably be neater to give it a class and set the styles in css:

svg.append("text")
   .attr("x", c._xPixels() + c._widthPixels() / 2)
   .attr("y", c._yPixels() - 20)
   .style("text-anchor", "middle")
   .style("font-family", "sans-serif")
   .style("font-weight", "bold")
   .text("My brilliant chart about a and b");


http://jsbin.com/hosobo/4/edit?js,output

+8


source


John's answer is awesome, but couldn't you use the dimple function for titleShape? If you define your axes as "x" and "y" you can simply do:

x.titleShape.text("your x axis title");
y.titleShape.text("your y axis title");


If you don't define axes, then using d3 as John has shown is probably the best way to go.

+2


source






More articles:


All Articles