https://github.com/nextbitlabs/ternary-plot
Web component for the implementation of a ternary plot.
https://github.com/nextbitlabs/ternary-plot
chart js plot svg ternary webcomponent
Last synced: about 1 year ago
JSON representation
Web component for the implementation of a ternary plot.
- Host: GitHub
- URL: https://github.com/nextbitlabs/ternary-plot
- Owner: nextbitlabs
- License: mit
- Created: 2019-06-07T20:07:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T12:03:43.000Z (over 3 years ago)
- Last Synced: 2025-03-18T14:49:50.156Z (about 1 year ago)
- Topics: chart, js, plot, svg, ternary, webcomponent
- Language: JavaScript
- Homepage: https://github.com/nextbitlabs/ternary-plot
- Size: 977 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# <ternary-plot>
 [](https://www.webcomponents.org/element/ternary-plot)
Web component to implement a ternary plot.
## Usage
In an html file
```html
import 'https://unpkg.com/ternary-plot@latest/dist/ternary-plot.umd.js';
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap');
/*
CSS custom properties penetrate the Shadow DOM,
they are useful to provide custom styling.
The ternary-plot webcomponent exposes font-size and font-family custom properties.
*/
ternary-plot {
--font-size: 13px;
--font-family: 'Roboto Mono', monospace;
}
const element = document.querySelector('ternary-plot');
// Set data as a dynamic property.
element.data = {
titles: {
bottom: "Variable A",
right: "Variable B",
left: "Variable C",
},
data: [
// The sum of bottom, right and left should be 1.
{
bottom: 0.3,
right: 0.4,
left: 0.3
},
{
bottom: 0.1,
right: 0.5,
left: 0.4
},
]
};
```
With npm:
```
npm i ternary-plot
```
See [demo1](https://stackblitz.com/edit/ternary-plot-example) and [demo2](https://stackblitz.com/edit/ternary-plot-example-random-data).
## License
MIT