Custom data labels with symbols

author(s): Torstein Hønsi

by Masahiro Morita

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Gantt chart demonstrating custom symbols in the data labels.
    </p>
</figure>

CSS

#container,
#button-container {
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

Highcharts.ganttChart('container', {
    title: null,
    subtitle: null,
    yAxis: {
        categories: [0, 1, 2],
        visible: false,
    },
    xAxis: {
	    //grid: { enabled: false }
      showFirstLabel: false
    },
    tooltip: {
        outside: true
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}',
            }
        }
    },
    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2018, 11, 1),
            end: Date.UTC(2018, 11, 2),
            y: 0,
            name: 'hohoho<br>ho',
        }, {
            start: Date.UTC(2018, 11, 2),
            end: Date.UTC(2018, 11, 5),
            y: 1,
            assignee: 'oysteinmoseng',
            fontSymbol: 'exclamation',
            accessibility: {
                description: 'Exclamation symbol.'
            }
        }, {
            start: Date.UTC(2018, 11, 8),
            end: Date.UTC(2018, 11, 9),
            y: 2,
            assignee: 'TorsteinHonsi'
        }],
    }]
});