Highcharts Trellis chart

by fekkyDev s

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<h1>Highcharts Trellis chart emulation</h1>

<table id="trellis">
    <tr>
        <td class="first"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

#trellis td {
    width: 200px;
    height: 200px;
}
#trellis td.first {
    width: 300px;
}

JavaScript

var charts = [],
    containers = document.querySelectorAll('#trellis td'),
    datasets = [{
            name: 'Erik',
            data: [3, 6, 1, 2, 6]
        },
       
    ];

datasets.forEach(function(dataset, i) {
    charts.push(Highcharts.chart(containers[i], {

        chart: {
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },

        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
            categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Carrots'],
            labels: {
                enabled: i === 0
            }
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            min: 0,
            max: 10
        },


        legend: {
            enabled: false
        },

        series: [dataset]

    }));
});