Ternary Plot is an official Black Label plugin for Highcharts, extending the charting library with support for ternary charts used to visualize data composed of three interdependent values that sum to a constant (typically 100%). Each data point represents a composition of three components and is plotted within a triangular coordinate system, making it easy to compare proportions and relationships between them. The plugin is built as a separate add-on to the Highcharts library, owned and maintained by Highsoft AS.
This module is the result of our long-standing collaboration with Highsoft, where we’ve been a trusted partner since 2010 — helping build, maintain, and expand the Highcharts ecosystem. With Ternary Plot, you can easily present complex three-component datasets in a clear and interactive way, without relying on custom implementations or workarounds.
➖ Live demo
➖ GitHub repository
| Ternary Plot Version | Highcharts Version |
|---|---|
| 1.0.0 | >= 12.0.0 |
Install via NPM:
npm install highcharts highcharts-ternary-plot
# or
yarn add highcharts highcharts-ternary-plot
# or
pnpm add highcharts highcharts-ternary-plotThen import and initialize:
import Highcharts from "highcharts";
import HighchartsTernaryPlot from "highcharts-ternary-plot";
HighchartsTernaryPlot(Highcharts);Or include via a <script> tag after loading Highcharts:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/highcharts-ternary-plot/js/ternary-plot.js"></script>Enable chart.ternary and add a ternaryscatter series with three-dimensional data:
Highcharts.chart('container', {
chart: {
ternary: true
},
series: [{
type: 'ternaryscatter',
data: [
[20, 70, 10],
[30, 40, 30],
[20, 35, 45],
[15, 35, 50],
[20, 20, 60],
[0, 100, 0]
]
}]
});| Option | Type | Description |
|---|---|---|
chart.ternary |
Boolean |
Whether to enable ternary chart mode. |
chart.ternarySpacing |
Number |
The spacing around the ternary plot. |
ternaryAxis |
Array |
An array of ternary axis configurations. |
If you want to work on this plugin locally:
- Clone the repository
git clone https://github.com/blacklabel/highcharts-ternary-plot.git
cd highcharts-ternary-plot- Install dependencies
npm install
# or
yarn install- Start a local dev server
npm startThis will launch a local server (via http-server or similar) and open the demo page in your browser.
- Build the plugin
npm run buildThe compiled file will be available in the dist/ folder.
After building, include the plugin file after Highcharts in your index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts Ternary Plot - Local Dev</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="dist/highcharts-ternary-plot.js"></script>
</head>
<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
ternary: true
},
series: [{
type: 'ternaryscatter',
data: [
[20, 70, 10],
[30, 40, 30],
[20, 35, 45],
[15, 35, 50],
[20, 20, 60],
[0, 100, 0]
]
}]
});
</script>
</body>
</html>At Black Label, we specialize in pushing the boundaries of data visualization. Over the past 15 years, we’ve worked with companies worldwide to build charting solutions that go beyond out-of-the-box libraries.
Highcharts is at the heart of much of our work, and this plugin grew directly out of real-world client needs:
- Visualizing compositional data using ternary charts
- Extending Highcharts with native ternary axes and series types
Ternary Plot is one of many plugins we’ve created to make Highcharts more flexible, more powerful, and more developer-friendly.
We’re a Krakow-based team of data visualization experts, working closely with Highsoft and the global Highcharts community since 2010. Our expertise spans plugins, extensions, custom dashboards, and full-scale dataviz applications.
Ternary Plot is just one of the many innovations we’ve open-sourced. Explore more on our GitHub profile, read insights on our Blog, or connect with us at tech@blacklabel.net to discuss how we can help bring your charts and dashboards to life.
➖ Learn more on our LinkedIn page.