Include a label within the Highcharts Gantt chart square

I'm struggling to include a label within each box in the Gantt Diagram Highcharts, and I'm unsure how to proceed. How can I display a value within each frame?

The label needs to be positioned at the center of each box, and all the data is generated dynamically.

Below is an example of the progress I have made so far.

If you have any insights or assistance to offer, it would be greatly appreciated...

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'
    }
  }
};

// Implementing 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;
  
// More script data and logic...

// End of the script

Answer №1

To achieve this, enable the dataLabels and utilize either dataLabels.formatter or dataLabels.format to customize the display.

Example:

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'
    }
  }
};

// Applying the theme
Highcharts.setOptions(Highcharts.theme);

// Rest of the code...

Live Demonstration:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX is designed to only modify one specific Django model instance at a time

My Django project displays a list of "issue" objects, each with a boolean field called "fixed". I am looking to implement a feature where users can press a button that will modify the "fixed" status using Ajax. However, currently, the button only changes o ...

How to toggle hidden links with AngularJS or vanilla JavaScript with a click事件

When the "Show all" button is clicked, I would like to display all elements. If the "1st half" link is clicked, I want to show "abc", "def", and "ghi". When the 2nd link "2nd half" is clicked, I want to display "jkl", "mno", and "pqr". Then, when the "show ...

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

The file-loader in Webpack is failing to copy the files and update the URL

I am encountering an issue with webpack file loader where it is not outputting image files. This problem arises while also importing HTML files as partials in my Angular app. Below is my webpack configuration for handling images using the file-loader: [w ...

The object has been defined, but the specific property is returning as undefined

I have defined a class in the following way: export class User{ private _name:string constructor(){} get name():string{ return this._name } set name(val:string){ this._name = val } } Now, in my login code, I am ...

How to set up objects with accessors and mutators in ES5 JavaScript?

creating a new object, obj1, with an enumerable property of value 42 > changing the value of obj1.property to 56 > output: 56 > accessing obj1.property returns: 42 When using use strict, an error occurs. To merge multiple objects: using jQuery ...

Combining the redux toolkit function createAsyncThunk with Angular's HttpClient by leveraging the ApiService

Currently, I am working on incorporating @reduxjs/toolkit into an Angular project. Is there a way to pass an Angular service as a parameter to the callback of createAsyncThunk instead of utilizing fetch directly? I referenced the documentation for an exa ...

Having difficulty in replicating and obtaining flash video content from a website through HTML coding

I'm having trouble downloading a flash video, as traditional download software isn't working. I attempted to directly access the video from the html script itself, following this tutorial : https://www.youtube.com/watch?v=waE3J0Jej_0 The script ...

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

Steer clear of using grey backgrounds for anchors/links in IE 10

What is the best way to prevent the irritating grey background that appears on anchors in IE 10 when they are clicked? ...

Pattern Matching: Identifying partial or complete text

Currently, I'm facing challenges with a small script that is designed to compare the value from a text input with items in an array either partially or completely. I am struggling specifically with the regular expression and its syntax. I was hoping ...

Unable to resolve the issue within Angular UI modal

Currently, I am facing an issue with displaying a modal using Angular Bootstrap UI. The modal is supposed to resolve items in the controller, but I am struggling to access those resolved items in the modal controller. $scope.showItemsInBill = function(bill ...

Encountering a problem when looping through a JSON response

After making an Ajax call, I received the JSON response below. studentList: { "currentStudent":0, "totalStudent":11, "studentDetails": [{ "adId":1, "adName":"BMB X5", "sfImage":{ "imageName":"Desert", "image ...

Creating a custom useStorage hook to easily save a Set data type in local storage

I attempted to make modifications to the code found at this reference link: useLocalStorage hook my goal was to enable saving a Set() to localStorage. useLocalStorage.js import { useState, useEffect } from "react"; // Custom Hook export const ...

Vuetify displaying incorrectly following deployment

After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...

Attempting to persist a nested document in MongoDB using mongoose within a Nodejs environment

I attempted to save an address as a nested document in the following format When sending data from the client side, it was formatted like this: const address = JSON.stringify( { addressline1:form.addressline1.value, addressline2:form.addressline2.value, c ...

Check for length validation including spaces in JavaScript

My code includes a functionality that calculates the length of characters in a text area using both JSP and JavaScript: <textarea class="textAreaLarge" id="citation" rows="20" cols="180" name="citation" ...

What is the best way to eliminate transition effects in Vue.js when there are changes in the data

My Vue.js 2.x component fetches data from the server in this way. <template> ... <a href="..." v-if="data.status !== 'blind'">Link</a> ... </template> <script> export default { ... data: { retu ...

Displaying checkbox values with JavaScript

How can I display multiple checkbox values when checked in HTML code? Whenever I check a checkbox, I want its value to be shown alongside the previously checked values. Right now, my code only displays one value at a time. Any suggestions on how to achie ...

The functionality of $(selector).css() seems to be malfunctioning

I currently have an html div element stored in a variable var rows = ""; rows += "<div>1111 : Hi there</div>"; Despite multiple attempts, I have failed to add a background color to this div using the following methods: 1. $(rows).css({&apos ...