Name: Highcharts Ternary Plot
Author: Black Label

Installation

NPM

npm install highcharts-ternary-plot

CDN

<script src="https://cdn.jsdelivr.net/npm/highcharts-ternary-plot@2.0.0/js/ternary-plot.js"></script>

Info

Version v2.0.0
Requires Highcharts 12.0.0+
TypeScript Included
Browser All modern browsers
License MIT
Changelog View changelog

Links

Electricity mix by region

Shifts in renewable, fossil, and nuclear energy share from 2015 to 2024. Larger markers indicate the most recent year.

Minimal usage

A simple ternary scatter plot — three axes, one series, six data points. The starting point for your own chart.

Usage example

                        // After loading Highcharts and the plugin:
// <script src="highcharts.js"></script>
// <script src="ternary-plot.js"></script>

Highcharts.chart('container', {
    chart: {
        ternary: true
    },

    title: {
        text: 'Diet macronutrients'
    },

    ternaryAxis: {
        a: { title: { text: 'Protein' } },
        b: { title: { text: 'Fat' } },
        c: { title: { text: 'Carbohydrates' } }
    },

    series: [{
        type: 'ternaryscatter',
        name: 'Diet macronutrients',
        keys: ['a', 'b', 'c', 'name'],
        data: [
            [20, 70, 10, 'Keto'],
            [30, 40, 30, 'Paleo'],
            [20, 35, 45, 'Mediterranean'],
            [15, 35, 50, 'Standard Western'],
            [20, 20, 60, 'High-carbohydrate'],
            [0, 100, 0, 'Fat-only']
        ]
    }]
});
                    