LegendTop

by tin nguyen

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var titleFontSize = 16;
var subtitleFontSize = 12;
var titleMargin = 15;

var hasTitle = true;
var hasSubTitle = true;

titleFontSize = hasTitle ? titleFontSize : 0;
subtitleFontSize = hasSubTitle ? subtitleFontSize : 0;
titleMargin = (hasTitle || hasSubTitle) ? titleMargin : 0;

var yLegend = titleMargin + titleFontSize + subtitleFontSize;
var yTitle = hasTitle ? titleFontSize * 0.9 : 0;
var ySubTitle = hasSubTitle ? (yTitle + subtitleFontSize) : 0;

var chart = new Highcharts.Chart({

    chart: {
        spacingTop: 0,
        renderTo: 'container',
        type: 'column'

    },
    title: {
        y: yTitle,
        text: hasTitle ? 'Chart title' : '',
        style: {
            fontSize: titleFontSize + "px"
        }
    },
    subtitle: {
        y: ySubTitle,
        text: hasSubTitle ? 'The subtitle' : '',
        style: {
            fontSize: subtitleFontSize + "px"
        }

    },
    legend: {
        y: yLegend,
        verticalAlign: 'top',
        align: 'center'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    series: [
        {
        data: [29.9, 71.5, 106.4]},
    {
        data: [129.9, 171.5, 150]},
    {
        data: [97, 34, 75]},
    {
        data: [15, 98, 121]}


    ]
});