Models - GerHobbelt/nvd3 GitHub Wiki
If you take a pen and paper and draw a chart, you will find that even the simplest chart (for example a line chart), can be decomposed into separate components. In addition to the line representing the data, there are the x- and y-axes and possibly a legend.
In the same way, nvd3.js charts are the result of composing a variety of basic components.
This gives us a couple of benefits:
- We can ensure that charts are consistent: they all use the same basic components
- We have flexibility to create more complex charts: if you want a chart with a combination of chart types not supplied, the framework allows you to construct your own easily.
Charts
nvd3.js comes with a variety of simple chart types as well as a selection of combined charts (e.g.: line + scatter).
| Component | Object Name | Related Combined Charts |
|---|---|---|
| Bullet Chart | nv.models.bulletChart | |
| Discrete Bar Chart | nv.models.discreteBarChart | |
| Historical Bar Chart | nv.models.historicalBarChart | linePlusBarChart |
| Line Chart | nv.models.lineChart | cumulativeLineChart, linePlusBarChart, linePlusBarWithFocusChart, lineWithFisheye, lineWithFisheyeChart |
| Multi Bar Chart | nv.models.multiBarChart | |
| Multi Bar Horizontal Chart | nv.models.multiBarHorizontalChart | |
| Multi Bar Time Series Chart | nv.models.multiBarTimeSeriesChart | |
| Pie Chart | nv.models.pie | |
| Scatter Chart | nv.models.scatterChart | scatterPlusLineChart |
| Stacked Area Chart | nv.models.stackedAreaChart |
##Model Components
Chart Basics
Components common to a variety of chart types that establish the basic skeleton of a chart.
| Component | Object Name | Events | Comments |
|---|---|---|---|
| Axis | nv.models.axis | ||
| Legend | nv.models.legend | legendClick, legendDblclick, legendMouseover, legendMouseout, stateChange | (being able to add a label would be nice) |
Data Visualisations
Components that visualise data
| Component | Object Name | Events | Comments |
|---|---|---|---|
| Discrete Bar | nv.models.discreteBar | chartClick, elementClick, elementDblClick, elementMouseover, elementMouseout | |
| Historical Bar | nv.models.historicalBar | chartClick, elementClick, elementDblClick, elementMouseover, elementMouseout | May be deprecated in favour of multi bar with a single series |
| Line | nv.models.line | elementClick, elementMouseover, elementMouseout | |
| Multi Bar | nv.models.multiBar | chartClick, elementClick, elementDblClick, elementMouseover, elementMouseout | |
| OHLC Bar | nv.models.ohlcBar | chartClick, elementClick, elementDblClick, elementMouseover, elementMouseout | Open-High-Low-Close bar |
| Pie | nv.models.pie | chartClick, elementClick, elementDblClick, elementMouseover, elementMouseout | |
| Scatter | nv.models.scatter | elementClick, elementMouseover, elementMouseout | |
| Sparkline | nv.models.sparkline | ||
| Stacked Area | nv.models.stackedArea | tooltipShow, tooltipHide, areaClick, areaMouseover, areaMouseout |