Create Highcharts grid with product, weight, and price data

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div id="container"></div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

JavaScript

Grid.grid('container', {
    data: {
        columns: {
            id: [1, 2, 3],
            path: [
                'Root/Marketing',
                'Root/Sales/EMEA',
                'Root/Sales/APAC'
            ],
            budget: [600, 400, 350]
        },
        idColumn: 'id'
    },
    treeView: {
        enabled: true,
        treeColumn: 'path',
        input: {
            type: 'path',
            showFullPath: false
        }
    },
    columnDefaults: {
        rowAggregator: 'SUM'
    }
})