Add label in into square Highcharts Gant

Question

I'm trying to add a label in each box in Gant Diagram Highcharts, but I can not do it. How can I show some value in each frame?

The label must appear in the center of each box. All the data I generate dynamically

Below I leave the example of what I have advanced.

If you can help me, thank you very much...

 Highcharts.createElement('link', { href: 'https://fonts.googleapis.com/css?family=Unica+One', rel: 'stylesheet', type: 'text/css' }, null, document.getElementsByTagName('head')[0]); Highcharts.theme = { chart: { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, '#FAFAFA'], [1, '#FAFAFA'] ] }, style: { fontFamily: '\\'Unica One\\', sans-serif' } } }; // Apply the theme Highcharts.setOptions(Highcharts.theme); var today = new Date('2018-02-02'); var day = 1000 * 60 * 60 * 24; var map = Highcharts.map; var dateFormat = Highcharts.dateFormat; var series; var cars; today.setUTCHours(0); today.setUTCMinutes(0); today.setUTCSeconds(0); today.setUTCMilliseconds(0); today = today.getTime(); function formatear(dato) { var fecha = new Date(dato); fecha.setUTCHours(0); fecha.setUTCMinutes(0); fecha.setUTCSeconds(0); fecha.setUTCMilliseconds(0); fecha = fecha.getTime(); return fecha; } var js = [{ assigns: '39982-Constanza', current: 0, pendings: 0, finalized: 35, asigned: 35, deals: [{ pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-20') - 1 * day, to: formatear('2018-02-20') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-21') - 1 * day, to: formatear('2018-02-21') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-23') - 1 * day, to: formatear('2018-02-23') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, { assigns: '52270-Jhon', current: 0, pendings: 0, finalized: 76, asigned: 76, deals: [{ pending: '15', from: formatear('2018-02-07') - 1 * day, to: formatear('2018-02-07') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-21') - 1 * day, to: formatear('2018-02-21') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, { assigns: '54243-Jane', current: 0, pendings: 0, finalized: 39, asigned: 39, deals: [{ pending: '15', from: formatear('2018-02-06') - 1 * day, to: formatear('2018-02-06') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-09') - 1 * day, to: formatear('2018-02-09') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-13') - 1 * day, to: formatear('2018-02-13') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, ] }, { assigns: '55011-Juan', current: 0, pendings: 0, finalized: 66, asigned: 66, deals: [{ pending: '15', from: formatear('2018-02-05') - 1 * day, to: formatear('2018-02-05') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-06') - 1 * day, to: formatear('2018-02-06') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-07') - 1 * day, to: formatear('2018-02-07') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-09') - 1 * day, to: formatear('2018-02-09') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-11') - 1 * day, to: formatear('2018-02-11') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-14') - 1 * day, to: formatear('2018-02-14') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, ]; grafica(js); function grafica(script) { //console.log(script); var json = script; series = json.map(function(item, i) { var data = item.deals.map(function(deal) { return { id: 'deal-' + i, pending: deal.pending, start: deal.from, end: deal.to, assign: deal.assign, y: i }; }); return { name: item.assigns, data: data, current: item.deals[item.current], pendings: item.pendings, finalized: item.finalized, asigned: item.asigned }; }); Highcharts.ganttChart('container', { series: series, title: { text: 'Resume' }, tooltip: { pointFormat: '<span>Pendings: {point.pending}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>' }, xAxis: { currentDateIndicator: true }, yAxis: { type: 'category', grid: { columns: [{ title: { text: 'Person' }, categories: map(series, function(s) { return s.name; }) }, { title: { text: 'Assigns' }, categories: map(series, function(s) { return s.asigned; }) }, { title: { text: 'Ends' }, categories: map(series, function(s) { return s.finalized; }) }, { title: { text: 'From' }, categories: map(series, function(s) { return dateFormat('%e. %b', s.current.from); }) }, { title: { text: 'To' }, categories: map(series, function(s) { return dateFormat('%e. %b', s.current.to); }) }, { title: { text: 'Pendings' }, categories: map(series, function(s) { return s.pendings; }) } ] } } }); } 

 #container { max-width: 1200px; min-width: 800px; height: 400px; margin: 1em auto; } .scrolling-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script> <script src="https://code.highcharts.com/gantt/modules/exporting.js"></script> <div class="scrolling-container"> <div id="container"></div> </div> 

Answer 1

You can achieve it by enabling dataLabels and use dataLabels.formatter or dataLabels.format to set what would be presented.

Code:

 Highcharts.createElement('link', { href: 'https://fonts.googleapis.com/css?family=Unica+One', rel: 'stylesheet', type: 'text/css' }, null, document.getElementsByTagName('head')[0]); Highcharts.theme = { chart: { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, '#FAFAFA'], [1, '#FAFAFA'] ] }, style: { fontFamily: '\\'Unica One\\', sans-serif' } } }; // Apply the theme Highcharts.setOptions(Highcharts.theme); var today = new Date('2018-02-02'); var day = 1000 * 60 * 60 * 24; var map = Highcharts.map; var dateFormat = Highcharts.dateFormat; var series; var cars; today.setUTCHours(0); today.setUTCMinutes(0); today.setUTCSeconds(0); today.setUTCMilliseconds(0); today = today.getTime(); function formatear(dato) { var fecha = new Date(dato); fecha.setUTCHours(0); fecha.setUTCMinutes(0); fecha.setUTCSeconds(0); fecha.setUTCMilliseconds(0); fecha = fecha.getTime(); return fecha; } var js = [{ assigns: '39982-Constanza', current: 0, pendings: 0, finalized: 35, asigned: 35, deals: [{ pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-20') - 1 * day, to: formatear('2018-02-20') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-21') - 1 * day, to: formatear('2018-02-21') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-23') - 1 * day, to: formatear('2018-02-23') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, { assigns: '52270-Jhon', current: 0, pendings: 0, finalized: 76, asigned: 76, deals: [{ pending: '15', from: formatear('2018-02-07') - 1 * day, to: formatear('2018-02-07') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-21') - 1 * day, to: formatear('2018-02-21') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, { assigns: '54243-Jane', current: 0, pendings: 0, finalized: 39, asigned: 39, deals: [{ pending: '15', from: formatear('2018-02-06') - 1 * day, to: formatear('2018-02-06') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-09') - 1 * day, to: formatear('2018-02-09') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-13') - 1 * day, to: formatear('2018-02-13') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-19') - 1 * day, to: formatear('2018-02-19') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, ] }, { assigns: '55011-Juan', current: 0, pendings: 0, finalized: 66, asigned: 66, deals: [{ pending: '15', from: formatear('2018-02-05') - 1 * day, to: formatear('2018-02-05') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-06') - 1 * day, to: formatear('2018-02-06') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-07') - 1 * day, to: formatear('2018-02-07') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-09') - 1 * day, to: formatear('2018-02-09') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-11') - 1 * day, to: formatear('2018-02-11') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-14') - 1 * day, to: formatear('2018-02-14') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-16') - 1 * day, to: formatear('2018-02-16') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-22') - 1 * day, to: formatear('2018-02-22') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-26') - 1 * day, to: formatear('2018-02-26') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-27') - 1 * day, to: formatear('2018-02-27') + 0 * day, assign: 1 }, { pending: '15', from: formatear('2018-02-28') - 1 * day, to: formatear('2018-02-28') + 0 * day, assign: 1 }, ] }, ]; grafica(js); function grafica(script) { //console.log(script); var json = script; series = json.map(function(item, i) { var data = item.deals.map(function(deal) { return { id: 'deal-' + i, pending: deal.pending, start: deal.from, end: deal.to, assign: deal.assign, y: i }; }); return { name: item.assigns, data: data, current: item.deals[item.current], pendings: item.pendings, finalized: item.finalized, asigned: item.asigned }; }); Highcharts.ganttChart('container', { series: series, plotOptions: { gantt: { dataLabels: { enabled: true, formatter: function() { console.log(this); return this.y; } } } }, title: { text: 'Resume' }, tooltip: { pointFormat: '<span>Pendings: {point.pending}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>' }, xAxis: { currentDateIndicator: true }, yAxis: { type: 'category', grid: { columns: [{ title: { text: 'Person' }, categories: map(series, function(s) { return s.name; }) }, { title: { text: 'Assigns' }, categories: map(series, function(s) { return s.asigned; }) }, { title: { text: 'Ends' }, categories: map(series, function(s) { return s.finalized; }) }, { title: { text: 'From' }, categories: map(series, function(s) { return dateFormat('%e. %b', s.current.from); }) }, { title: { text: 'To' }, categories: map(series, function(s) { return dateFormat('%e. %b', s.current.to); }) }, { title: { text: 'Pendings' }, categories: map(series, function(s) { return s.pendings; }) } ] } } }); } 

 #container { max-width: 1200px; min-width: 800px; height: 400px; margin: 1em auto; } .scrolling-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script> <script src="https://code.highcharts.com/gantt/modules/exporting.js"></script> <div class="scrolling-container"> <div id="container"></div> </div> 

Demo:

• formatter: https://jsfiddle.net/BlackLabel/o7a32fk4
• format: https://jsfiddle.net/BlackLabel/kb85v490/1/