Ternary Plot

by Black Label

ArrowRequirements

  • Highcharts 12.0.0 or newer

ArrowCode

ArrowInstallation

NPM npm install highcharts-ternary-plot
CDN <script src="https://unpkg.com/highcharts-ternary-plot@latest/dist/ternary-plot.js"></script>

ArrowUsage example

// After loading Highcharts and the plugin
Highcharts.chart('container', {
    chart: {
        ternary: true
    },

    title: {
        text: 'Diet macronutrients'
    },

    ternaryAxis: [{
        title: {
            text: 'Protein'
        }
    }, {
        title: {
            text: 'Fat'
        }
    }, {
        title: {
            text: 'Carbohydrates'
        }
    }],

    series: [{
        type: 'ternaryscatter',
        name: 'Diet macronutrients',
        keys: ['x', 'y', 'z', 'name'],
        tooltip: {
            headerFormat: '',
            pointFormat: `
                <strong>{point.name} diet:</strong><br>
                Protein: {point.x}%<br>
                Fat: {point.y}%<br>
                Carbohydrates: {point.z}%
            `
        },
        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']
        ]
    }]
});