Question

I want to have title text similar as described at this answer. I wanted to specify top margin to ensure place for it. However the margin.top seems to have no effect at all.

I specify the margin like this in javascript:

chart.margin({
        top: 1000,
        right: 100,
        bottom: 0,
        left: 100
    });

All other margins are working as expected. Try my short demo at http://jsfiddle.net/6DgVP/2/ (credits go to the original example I modified) . All margins are working except top.

Is it a known issue? Can I fix it somehow?

Was it helpful?

Solution

Hmm, sounds like a bug to me. The problem is this bit of code in this file:

if ( margin.top != legend.height()) {
      margin.top = legend.height();
      availableHeight = (height || parseInt(container.style('height')) || 400)
                         - margin.top - margin.bottom;
    }

This ignores the setting of margin.top if a legend is shown by setting it to the height of the legend. You can of course hide the legend to get the top margin to be taken into account (which I have done here), but you can also set the top margin of the legend to achieve this:

chart.legend.margin({top: 30});

Complete demo here.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top