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">
{
    "data": {
        "events": [
            {
                "id": "567ad715b78a953bc2ba0ca12bc9bdf1",
                "title": "Henry Kissinger has died at age 100",
                "name": "Henry Kissinger has died at age 100",
                "rate": 1,
                "CDate": "2023-11-30",
                "start": 1701295201000,
                "end": 1701295201000,
                "media": "https:\/\/images.mktw.net\/im-33604745?width=700&height=466",
                "end_t": "2023-11-30"
            },
            {
                "id": "a0cec4e74472ca436f1deaba44a1d1ce",
                "title": "Alistair Darling died at age 70 on Monday, his family announced",
                "name": "Alistair Darling died at age 70 on Monday, his family announced",
                "dependency": "b2029e422a498e04f4ad995327a60826",
                "rate": 0.307692,
                "CDate": "2023-11-30",
                "start": 1701295201000,
                "end": 1701381599000,
                "media": "https:\/\/assets.bwbx.io\/images\/users\/iqjWHBFdfxIU\/iv.4Of89N25U\/v0\/-1x-1.jpg"
            },
            {
                "id": "567ad715b78a953bc2ba0ca12bc9bdf1",
                "title": "Henry Kissinger has died at age 100",
                "name": "Henry Kissinger has died at age 100",
                "dependency":...

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

/*
var dataTag = document.getElementById('data').innerHTML,
    dataJson = JSON.parse(dataTag);
*/
//https://hce:[email protected]/?request={%22type%22:0,%22from%22:%222023-12-01%22,%22to%22:%222023-12-04%22,%22threshold%22:0.3,%22events_include_bits_mask%22:3,%22filter%22:{%22mode%22:1,%22min_tracked_events%22:3,%22same_date_tracks%22:0}}

/*
 onerror="this.onerror=null;this.src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==\'"

https://png-pixel.com/
 */
const dataSource = 1;
/*
var url = 'https://events-api.test.grasp.hce-project.com/?request={%22type%22:0,%22from%22:%222023-12-01%22,%22to%22:%222023-12-04%22,%22threshold%22:0.3,%22events_include_bits_mask%22:3,%22filter%22:{%22mode%22:1,%22min_tracked_events%22:3,%22same_date_tracks%22:0}}';

var url = 'https://events-api.test.grasp.hce-project.com/?request={%22type%22:0,%22from%22:%222023-12-04%22,%22to%22:%222023-12-18%22,%22threshold%22:0.3,%22events_include_bits_mask%22:7,%22filter%22:{%22mode%22:1,%22min_tracked_events%22:2,%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":1},"pointColorSaturation":{"mode":1,"tag":"sentiment"}}}';

*/
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({
     ...