https://github.com/ndabap/plotly-js-material-design-theme

NOT MAINTAINED Plotly.js charts with Material Design theme
https://github.com/ndabap/plotly-js-material-design-theme

chart d3 javascript material-design plotly

Last synced: 3 months ago
JSON representation

NOT MAINTAINED Plotly.js charts with Material Design theme

• Host: GitHub
• URL: https://github.com/ndabap/plotly-js-material-design-theme
• Owner: ndabAP
• License: mit
• Created: 2018-04-03T15:01:20.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-30T11:56:17.000Z (over 4 years ago)
• Last Synced: 2024-10-11T08:18:22.118Z (4 months ago)
• Topics: chart, d3, javascript, material-design, plotly
• Language: JavaScript
• Homepage: https://ndabap.github.io/plotly-js-material-design-theme/
• Size: 14.5 MB
• Stars: 14
• Watchers: 3
• Forks: 1
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# NOT MAINTAINED 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](https://ndabap.github.io/plotly-js-material-design-theme/).

## Features

- Material Design charts

- easily extendable

- effortlessly trimmable

## Installation

```bash

$ 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.

```js

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.

```js

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](https://www.julian-claus.de) and contributors.

## License

MIT