Controlling the gannt column header text and content

I am using the gannt, and when i am on days scale i see the date of each day in the column headers.

I would like full controll of that cell content (we want to add weather info for each date)

how can i do that?..

(i’ve managed to add an icon using only css, but i need more controll, since we want to add more data to each ccell)

To have full control over the content of the Gantt chart’s column headers, you can use the header attribute of the columns configuration option. The header attribute should contain a function that returns an object with the text and html properties, which define the content of the column header.

Hi,
You can add any data to the scale cell using the format attribute in the gantt.config.scales configuration object.
For example, I used the weather object:

const weather = [
    { date: "02-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "03-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
    { date: "04-04-2023", precipitationType: "fa-solid fa-cloud-rain",          temperature: "13" },
    { date: "05-04-2023", precipitationType: "fa-solid fa-cloud-meatball",      temperature: "8" },
    { date: "06-04-2023", precipitationType: "fa-solid fa-cloud-bolt",          temperature: "5" },
    { date: "07-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "08-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
    { date: "09-04-2023", precipitationType: "fa-solid fa-cloud-rain",          temperature: "13" },
    { date: "10-04-2023", precipitationType: "fa-solid fa-cloud-meatball",      temperature: "8" },
    { date: "11-04-2023", precipitationType: "fa-solid fa-cloud-bolt",          temperature: "5" },
    { date: "12-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "13-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
]

Scale configuration:

const dateFormat = gantt.date.date_to_str("%d-%m-%Y");
const dateFormatScale = gantt.date.date_to_str("%d %D");

gantt.config.scales = [
    { unit: "day", step:1, format: (date) => {
        const dayForecast = weather.find(item => item.date == dateFormat(date));
        if (dayForecast) {
            return `<i class='${dayForecast.precipitationType}'></i> ${dayForecast.temperature}°C<br/>${dateFormatScale(date)}`;
        }
    }}
]

Styles:

<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: unset;
    }

    .gantt_container .gantt_grid_scale .gantt_grid_head_cell {
        line-height: 43px;
    }

    .gantt_container .gantt_scale_cell {
        padding-top: 4px;
        line-height: 17px;
    }
</style>

Icons taken from here:

<script src="https://kit.fontawesome.com/7bc4fb1ca9.js" crossorigin="anonymous"></script>

Please see an example: https://snippet.dhtmlx.com/itjt4qzn

Wow, you really helped me…

I did something ugly by adding a few scales, one for the date, one for the icon and one for the tepertures…
I didn’t know the format attribute can hold html element…

Now i use a single scale and all the data is designed by me in it…

Thanks!!

1 Like