Highcharts Trellis chart

by Roydon DSouza

HTML

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



<div id="trellis"></div>

CSS

#trellis{
    width: 300px;
    height: 80px;
}

JavaScript

var charts = [],
    $containers = $('#trellis'),
    datasets = [{
        name: '',
        data: [50]}];


$.each(datasets, function(i, dataset) {
    charts.push(new Highcharts.Chart({

        chart: {
            renderTo: $containers[i],
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },
      
        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
           
            labels: {
                enabled:false
            }
        },
  
        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
              gridLineColor: 'transparent',
            gridLineWidth: 0,
            min: 0,
            max: 100
        },


        legend: {
            enabled: false
        },

        series: [dataset]

    }));
});