Set background color of Angular-nvD3

Question

I am using Angular-nvD3 in my Charts and I would like to change the background of this chart like the picture example. Can anyone help me please?

Here its the HTML code:

<div class="col-md-6">
    <nvd3 options="optionsrigidez" data="datarigidez" class="with-3d-shadow with-transitions"></nvd3>
</div>

And here its the angular params: 1. Options:

$scope.optionsrigidez = {
    chart: {
        type: 'lineChart',
        height: 250,
        reduceXTicks: true, // if false a tick will show for every data point
        margin: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
        },
        x: function (d) { return d.x; },
        y: function (d) { return d.y; },
        useInteractiveGuideline: true,
        dispatch: {
            stateChange: function (e) { console.log("stateChange"); },
            changeState: function (e) { console.log("changeState"); },
            tooltipShow: function (e) { console.log("tooltipShow"); },
            tooltipHide: function (e) { console.log("tooltipHide"); }
        },
        yDomain: [0.0, 100.0],
        showLegend: false,
        xAxis: {
            axisLabel: 'Data da análise',
            tickFormat: function (d) {
                return daysOfReport[d];
            },
            rotateLabels: -1
        },
        yAxis: {
            axisLabel: 'kV',
            tickFormat: function (d) {
                return d3.format('.01f')(d);
            },
            axisLabelDistance: -10
        },
        callback: function (chart) {
            //console.log("!!! lineChart callback !!!");
        }
    },
    title: {
        enable: true,
        text: 'Rigidez Dielétrica - Calota'
    },
    caption: {
        enable: true,
        html: '<b>Gráfico 3.</b> É uma medida da capacidade do óleo resistir à solicitação elétrica. Revela também a presença de impurezas polares como a água e outros oxigenados e sólidos (NBR 6869). Fonte: <a href="http://www.filtroil.ind.br/analise-de-oleo-isolante">Filtroil.<a/>',
        css: {
            'text-align': 'justify',
            'margin': '10px 13px 0px 7px'
        }
    }
};

Data:

function rigidez_function() {
    var rigidez = [];

    for (var i = 0; i < $scope.RelatorioOleo_analisesFQ.length; i++) {
        rigidez.push({ x: i, y: $scope.RelatorioOleo_analisesFQ[i].calota });
    }
    //Line chart data should be sent as an array of series objects.
    return [
        {
            values: rigidez,      //values - represents the array of {x,y} data points
            key: 'Rigidez Dielétrica', //key  - the name of the series.
            color: '#5A5A5A',  //color - optional: choose your own line color.
            strokeWidth: 2,
            //classed: 'dashed'
        }
    ];
};
$scope.datarigidez = rigidez_function();

score 1 · Accepted Answer · answered Jun 13 '18 at 12:58

Probably a bit late, but yes you can!

You have to create a MultiChart and draw the colored zones as 'stacked areas'. I've created a plunk here: http://plnkr.co/hW3Anw

chart: {
        type: 'multiChart',
        height: 450,
        margin : {
            top: 30,
...

testdata[1].type = "area"
testdata[1].yAxis = 1
testdata[1].values = [{x: 0, y: -0.5}, {x: 55, y: -0.5}]
testdata[2].type = "area"
testdata[2].yAxis = 1
testdata[2].values = [{x: 0, y: -5}, {x: 55, y: -5}]
...

Set background color of Angular-nvD3

1 Answers1