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 14 hours 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T12:03:43.000Z (almost 2 years ago)
• Last Synced: 2024-09-29T05:46:54.957Z (about 1 month ago)
• Topics: chart, js, plot, svg, ternary, webcomponent
• Language: JavaScript
• Homepage: https://github.com/nextbitlabs/ternary-plot
• Size: 977 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# <ternary-plot>

![Latest Release](https://badgen.net/github/release/nextbitlabs/ternary-plot) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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