plotly-js-material-design-theme
v1.1.3
Published
Plotly.js charts with Material Design theme.
Downloads
396
Maintainers
Readme
plotly-js-material-design-theme
Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.
This library introduces the Material Design guidelines to Plotly.js. See the current demo.
Features
- Material Design charts
- easily extendable
- effortlessly trimmable
Installation
$ npm install plotly-js-material-design-theme
Usage
Import the chart type you need plus the general layout, call the function and pass in your chart configuration. Your configuration will be recursively merged with the one creating Material Design, whereby your configuration has precedence.
import { layout, scatter } from 'plotly-js-material-design-theme'
Now setup your chart as usual but make sure you merge it with the imported one.
const scatterLines = scatter({
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter',
mode: 'lines'
})
Plotly.newPlot('scatter-lines', [scatterLines], layout({ title: 'Chart' }))
Charts
Plotly.js supports a variety of chart types. However, chart types can be classified by additional subproperties, e. g.
mode
or fillcolor
. There is a configuration for every mode. The following table lists currently supported charts by
this library.
| Type | Mode |
|-----------------------|-------------|
| bar
| |
| box
| |
| candlestick
| |
| carpet
| |
| choropleth
| |
| cone
| |
| contour
| |
| heatmap
| |
| histogram
| |
| histogram2d
| |
| histogram2dcontour
| |
| ohlc
| |
| paarcords
| |
| pie
| |
| sankey
| |
| scatter
| lines
|
| | markers
|
| scatterpolar
| lines
|
| scatterternary
| lines
|
| | markers
|
| | markers
|
| scatter3d
| lines
|
| | markers
|
| violin
| |
Author
Julian Claus and contributors.
License
MIT