NuCivic / react-nvd3

React component for NVD3 re-usable charting library
MIT License
136 stars 44 forks source link

MultiBar Chart Yaxis Range is set to Lowest varying variableSet #94

Open U-Tyagi opened 4 years ago

U-Tyagi commented 4 years ago

MyData:

[
        {
            values: Rdata,
            key: 'Rain (mm)',
            color: '#04a9f5',
            // area: true
        },
        {
            values: Hdata,
            key: 'Humidity %',
            color: '#A389D4'
        },
        {
            values: Tdata,
            key: 'Temperature (C)',
            color: '#ff9633',
        }
]

Rdata, Hdata, Tdata are arrays like: [{'x': new Date(dateStr), 'y': 10},{..},....] React-nvd3 Code:

React.createElement(NVD3Chart, {
                        xAxis: {
                            tickFormat: function (d) { return d3.timeFormat('%d%bT%H%M%Z')(new Date(d));; },
                            axisLabel: 'Timestamp'
                        },
                        yAxis: {
                            axisLabel: 'Parameter',
                            tickFormat: function (d) { return d3.format(',.2f')(d); },

                        },
                        type: 'multiBarChart',
                        datum: data,
                        x: 'x',
                        y: 'y', 
                        rotateLabels:-5,
                        showControls: false,
                        groupSpacing: 0.2,
                        duration: 350,
                        useInteractiveGuideline: true,
                        height: 300,
                        renderEnd: function () {
                            console.log('renderEnd');
                        }
                    })

It always set Yaxis range as per lowest varying VaribleArray i.e. Rdata; You can see the image 1

Rdata[ ] varies 0-9
Hdata[ ] varies 0-95
Tdata[ ] varies 0-48

Why Y-axis is displayed up to 9 only and not upto max Y value in the datum array. Any help/ signals would be appreciated.