change margins and padding in nvd3 chart

10
votes

I have the following nvd3 stacked Area Chart:

enter image description here

I want to add margin between the numbers/dates and the graph as well as the legend at the top and the graph. (please see the picture, I've marked the positions with a red line:

enter image description hereenter image description here

I've been investigating the rendered html but can't access the margin values via css, even if I try it inline with firefox's console. I've been able to change font-family and color with this css:

#chart1
  height: 300px
  text
    fill: #1a1f22
    font-size: 0.7em
    font-family: 'Source Sans Pro', sans-serif

But still whatever element (text,g,svg,...) I'm trying to attach a style to, nothing in terms of margin is changing.

Here's the javascript code for the chart:

nv.addGraph(function() {
    var histcatexplong = [
        <?= $array ?>

    ];


    var colors = d3.scale.category20();
    var keyColor = function(d, i) {return colors(d.key)};

    var chart;
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(true)
.showControls(false)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)

.transitionDuration(300);




chart.xAxis
.tickFormat(function(d) { return d3.time.format('%e.%m.%y')(new Date(d)) });



chart.yAxis
.tickFormat(d3.format(',.2f'));

d3.select('#chart1')
.datum(histcatexplong)
.transition().duration(1000)
.call(chart)


.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {

if(this.__transition__)
this.__transition__.duration = 1;
})
}, 0)
});

nv.utils.windowResize(chart.update);


return chart;
});

I've been reading all over nvd3's examples and docs, but still can't find a way to manipulate above said. Does somebody know of a way to do?

2
javascriptcsschartsnvd3.js

2 Answers

15
votes

In regards to your margin question, you can change the margins around the legend by calling:

 chart.legend.margin().bottom = 50;

Or alternatively:

 chart.legend.margin({top: 5, right: 0, bottom: 50, left: 0});

You can add space between the ticks and the axes by using the regular D3 tickPadding function: 

 chart.yAxis.tickPadding(25);
 chart.xAxis.tickPadding(25);

like in this Plunker.

1
votes
.nvd3 .nv-axis.nv-x path.domain {
  stroke-opacity: 1;
  stroke: red;
}

CSS is probably the way to go. (NVD3 makes the x-axis invisible by default, so you first want to set its opacity to 1.)

Example in this Plunker.