Custom data labels with symbols

bgv

by b_g_v

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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="events-chart">
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Gantt chart of events that are detected and tracked with a similarity rate 0.3.
    </p>
</figure>
</div>

<script type="application/json" id="data">

</script>

CSS

.events-chart{
  width: 100%;
  overflow: scroll;
  border: 0px solid red;
}
#container,#button-container {
    width: 1400px;
    margin: 0;
    border: 0px solid green;
}
text{
  font-size: 0.5em!important;
}
noImg{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==);
}
.highcharts-label-icon {
    opacity: 0.5;
}
.highcharts-figure{
  margin: 0;
}
.highcharts-treegrid-node-level-1 {
  left: 15px!important;
}
.positive {
  color:green;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.negative {
  color:red;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.neutral {
  color:gray;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.similarityIcon {
  background-color: #e1d8fa;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.digestRankIcon {
  background-color: orange;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.trackedIcon {
  background-color: #80FF80;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}

JavaScript

const dataSource = 1;
var url = 'https://events-api.test.grasp.hce-project.com/?request={%22type%22:0,%22from%22:%222023-12-20%22,%22to%22:%222023-12-22%22,%22threshold%22:0.25,%22events_include_bits_mask%22:7,%22filter%22:{%22mode%22:1,%22min_tracked_events%22:3,%22same_date_tracks%22:0},"extend_events_time":1,"@search":{"q":"japan"},"group":{"threshold":0.4,"min":2},"debug":1,"chart":{"pointWidth":{"mode":0,"default":41},"pointColor":{"mode":0},"pointColorSaturation":{"mode":1,"tag":"similarity","min":0.5}}}';



(async () => {
  var dataJson = null;

  if(dataSource == 0){
	  const user = 'hce', passwd = 'events12345';
		const headers = new Headers({
      'Authorization': `Basic ${btoa(user + ':' + passwd)}`,
      'Origin':'https://jsfiddle.net'
    });
    var options = {headers: headers, credentials: "include"};
    dataJson = await fetch(url, options).then(response => response.json());
  }else if(dataSource == 1){
    dataJson = await fetch(url).then(response => response.json());
  }else{
    var dataTag = document.getElementById('data').innerHTML;
    dataJson = JSON.parse(dataTag);
  }
/*
  Highcharts.setOptions({
  colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
  });
*/
/*
  $.each(dataJson.data.events, function (index, item) {
    if ((typeof item.color !== "undefined") && (typeof item.saturation !== "undefined")) {
    dataJson.data.events[index].color = colorKeywordToRGB(item.color, item.saturation);
    }
  });
*/
  Highcharts.AST.allowedAttributes.push('onerror');
  Highcharts.AST.allowedAttributes.push('src');
  Highcharts.AST.allowedReferences.push('');

  Highcharts.ganttChart('container', {
    chart: {
      events: {
        load() {
          const chart = this;
          chart.series[0].points.forEach(point => {
          console.log(point.saturation);
            if((typeof point.saturation) !== 'undefined'){
              point.color = colorKeywordToRGB(point.color,...