Search code examples
angularjschartsangular-nvd3

Set background color of Angular-nvD3


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?

enter image description here

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'
        }
    }
};
  1. 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();
    

Solution

  • Probably a bit late, but yes you can!

    plunk screenshot

    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}]
    ...