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

Single yAxis for linePlusBarChart #639

Open robertohuru opened 7 years ago

robertohuru commented 7 years ago

Could you please show me how to use only one y axis for linePlusBarChart? The example shown in this link have two yaxis (Y1 Axis and Y2Axis) http://plnkr.co/edit/f0QET0?p=preview I only want to use one yaxis (Y1 Axis) for both line and bar charts. Thanks you.

psyklopz commented 7 years ago

This seems to be a limitation in nvd3. I think they intend for you to use the MultiChart. https://nvd3-community.github.io/nvd3/examples/multiChart.html

From there, you can specify your axis in your data. For example, this puts them on the same y axis:

vm.graph_data = [
                {
                    yAxis: 1,
                    key : "Inventory",
                    type: "line",
                    values : [ { x: 1, y: 60}, { x: 2, y: 54}, { x: 3, y: 46}, { x: 4, y: 37}, { x: 5, y: 33}, { x: 6, y: 27}, { x: 7, y: 19}, { x: 8, y: 16} ]
                } ,

                {
                    yAxis: 1,
                    key : "Movement",
                    yDomain: [0, 100],
                    values : [ { x: 1, y: 6}, { x: 2, y: 8}, { x: 3, y: 9}, { x: 4, y: 4}, { x: 5, y: 6}, { x: 6, y: 8}, { x: 7, y: 3}, { x: 8, y: 4} ]
                }
            ];
ghost commented 7 years ago

+1