krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

Not able to create multibar(stacked) +line chart using multichart #640

Open sardesh opened 7 years ago

sardesh commented 7 years ago

I am trying to draw the combination of multbar(stacked) + line chart using multichart but its not working. any idea how i can achieve it ?

quimdt commented 7 years ago

I'm having the same problem, but I solved, with type:'bar', you need to add staked: true in options bars1: { stacked: true }

jlahare commented 6 years ago

@quimdt : can you please share code or screen shot ?

quimdt commented 6 years ago

This is an example of options object with multiChart with lines and bars stacked.

{
        chart: {
            height: 200,
            type: 'multiChart',
            margin : {
                top: 20,
                right: 20,
                bottom: 30,
                left: 40
            },
            duration: 1000,
            showControls: false,
            useInteractiveGuideline: true,
            showLegend: false,
            xAxis: {
                showMaxMin: false,
                tickFormat: function(d) {
                    return vm.labels[d];
                }
            },
            yAxis1: {
                ticks: 5,
                tickFormat: function(d){
                    return d;
                }
            },
            yAxis2: {
                ticks: 5,
                tickFormat: function(d){
                    return d;
                }
            },
            yDomain1: [0, 100.00],
            bars1: {
                stacked: true,
            },
            zoom: {
                enabled: false,
                useFixedDomain: false,
                useNiceScale: false,
                horizontalOff: false,
                verticalOff: true,
                unzoomEventType: 'dblclick.zoom',
                labelThreshold: 5
            }
        }
    };

The data will be something like for line {key: 'line', values:[{x:0,y:34,label:"day1"}], type:'line', yAxis:2} for bar {key: 'bar', values:[{x:0,y:58,label:"day1"}], type:'bar', yAxis:1}