OleVik
Posts: 4
Joined: Mon Apr 19, 2021 3:20 pm

Gantt Annotations

Hi,

I am hoping to overlay a colored shape, like in the demo at https://jsfiddle.net/gh/get/library/pur ... ntrollable. I was reading the API-docs at https://api.highcharts.com/gantt/annota ... apes.point, but I can't figure out what to input. Since it's a Gantt-chart, should it be the date from the xAxis and name from the yAxis?

Are there any examples of using annotations with Gantt-charts? I haven't been able to find any online. I'd just like to create a colored rectangle and label it, rather than use categories to expand the height of the chart.
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: Gantt Annotations

I don't fully understand what issue do You have, so please tell on which point do you have a problem:
1. You are trying to draw a shape on gantt
2. You have a shape and you are trying to do a hover event
3. You have shape with hover, but you are trying to make overlay on hover
4. You have all that, but you don't know how to position this overlay

It will be very helpfull if you give an example of your issue :)

Cause, the API that you provided is for points, not custom shapes.
OleVik
Posts: 4
Joined: Mon Apr 19, 2021 3:20 pm

Re: Gantt Annotations

Mainly 1 and 2: I am able to draw a shape, but it anchors according to pixels rather than points on the xAxis. I played around with the x, y, xAxis, and yAxis properties of annotations.shapes.point, but couldn't find out what data was expected. This is roughly what I am trying to achieve:
Gantt period overlays.jpg
Gantt period overlays.jpg (72.68 KiB) Viewed 3319 times
And this is what I currently have:
Gantt period prototype.jpg
Gantt period prototype.jpg (82.89 KiB) Viewed 3319 times
From this code:

Code: Select all

import Highcharts from "highcharts/highcharts-gantt.src";
import Annotations from "highcharts/modules/annotations";
Annotations(Highcharts);
import Exporting from "highcharts/modules/exporting";
Exporting(Highcharts);
import "highcharts/modules/annotations";
import "../node_modules/highcharts/css/highcharts.css";
import * as Norwegian from "dayjs/locale/nb";

const Series = [
  {
    data: [
      {
        name: "Behov",
        id: "behov",
        start: Date.UTC(2018, 9, 1),
        end: Date.UTC(2018, 9, 15),
      },
      {
        name: "Oppstartsmøte",
        id: "oppstartmoete",
        start: Date.UTC(2018, 9, 1),
        end: Date.UTC(2018, 9, 1),
        milestone: true,
        dataLabels: {
          className: "highlight",
        },
      },
      {
        name: "Workshop: Behovskartlegging",
        id: "workshop",
        start: Date.UTC(2018, 9, 4),
        start: Date.UTC(2018, 9, 4),
        milestone: true,
      },
      {
        name: "Flyttemøte: Befaring med arkitekt",
        id: "flyttemoete",
        start: Date.UTC(2018, 10, 25),
        start: Date.UTC(2018, 10, 25),
        milestone: true,
      },
      {
        name: "Konseptutvikling",
        id: "konseptutvikling",
        start: Date.UTC(2018, 9, 15),
        end: Date.UTC(2018, 10, 15),
      },
      {
        name: "Konseptbearbeiding",
        id: "konseptbearbeiding",
        start: Date.UTC(2018, 10, 15),
        end: Date.UTC(2018, 11, 1),
      },
      {
        name: "LOSAM: Vedtatt romplan",
        id: "losam",
        start: Date.UTC(2019, 4, 12),
        end: Date.UTC(2019, 4, 12),
        milestone: true,
      },
      {
        name: "Detaljprosjektering",
        id: "detaljprosjektering",
        start: Date.UTC(2020, 6, 4),
        end: Date.UTC(2020, 11, 1),
      },
      {
        name: "Formøte med DOKU",
        id: "formoete",
        start: Date.UTC(2020, 6, 4),
        end: Date.UTC(2020, 6, 4),
        milestone: true,
      },
      {
        name: "Workshop: Prinsipper for plassering",
        id: "workshop",
        start: Date.UTC(2020, 8, 18),
        end: Date.UTC(2020, 8, 18),
        milestone: true,
      },
      {
        name: "Allmøte del 1",
        id: "allmoete1",
        start: Date.UTC(2020, 10, 27),
        end: Date.UTC(2020, 10, 27),
        milestone: true,
      },
      {
        name: "Produksjon",
        id: "produksjon",
        start: Date.UTC(2020, 11, 1),
        end: Date.UTC(2021, 2, 14),
      },
      {
        name: "Allmøte del 2",
        id: "allmoete2",
        start: Date.UTC(2020, 11, 12),
        end: Date.UTC(2020, 11, 12),
        milestone: true,
      },
      {
        name: "Bestillingsmøte med Randi og Lindbak",
        id: "bestillingsmoete",
        start: Date.UTC(2020, 11, 23),
        end: Date.UTC(2020, 11, 23),
        milestone: true,
      },
      {
        name: "Omvisning på Kalvskinnet",
        id: "omvisning",
        start: Date.UTC(2020, 12, 7),
        end: Date.UTC(2020, 12, 9),
      },
      {
        name: "Justering av plassering",
        id: "justering",
        start: Date.UTC(2021, 1, 19),
        end: Date.UTC(2021, 1, 19),
      },
      {
        name: "Overlevering/bruk",
        id: "overlevering-bruk",
        start: Date.UTC(2021, 2, 15),
        end: Date.UTC(2021, 3, 31),
      },
      {
        name: "Fysisk flytting",
        id: "flytting",
        start: Date.UTC(2021, 2, 15),
        end: Date.UTC(2021, 2, 19),
      },
      {
        name: "Avslutning av SAMLOK-prosjekt",
        id: "avslutning",
        start: Date.UTC(2021, 3, 31),
        end: Date.UTC(2021, 3, 31),
        milestone: true,
      },
    ],
  },
];

Highcharts.setOptions({
  lang: {
    months: Norwegian.months,
    shortMonths: Norwegian.monthsShort,
    weekdays: Norwegian.weekdays,
    shortWeekdays: Norwegian.weekdaysShort,
  },
});

export default function () {
  window.Highcharts = Highcharts.ganttChart(
    document.querySelector("#container"),
    {
      chart: {
        styledMode: true,
      },
      title: {
        text: "Highcharts Gantt in Styled Mode",
      },
      subtitle: {
        text: "Purely CSS-driven design",
      },
      credits: {
        enabled: false,
      },
      exporting: {
        allowHTML: true,
      },
      tooltip: {
        enabled: false,
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            format: "{point.name}",
            style: {
              fontSize: "16px",
            },
          },
        },
      },
      annotations: [
        {
          id: "behov",
          shapes: [
            {
              type: "rect",
              fill: "#f45b5b",
              width: 200,
              height: 200,
              point: {
                x: 100,
                y: 100,
                xAxis: Date.UTC(2020, 10, 25),
              },
            },
          ],
        },
      ],
      yAxis: {
        useHTML: true,
      },
      xAxis: {
        min: Date.UTC(2018, 8, 15),
        max: Date.UTC(2021, 4, 15),
        minPadding: 0.05,
        maxPadding: 0.05,
        breaks: [
          {
            from: Date.UTC(2018, 11, 1),
            to: Date.UTC(2019, 4, 10),
            breakSize: 0,
          },
          {
            from: Date.UTC(2019, 4, 14),
            to: Date.UTC(2020, 6, 2),
            breakSize: 0,
          },
        ],
      },
      series: Series,
    }
  );
}
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: Gantt Annotations

For drawing somethings check this topic:
viewtopic.php?f=19&t=46236

I talked there with sebastian about drawing just recently :) (and there is this example https://jsfiddle.net/BlackLabel/xmg31aez/ of rectangles)
OleVik
Posts: 4
Joined: Mon Apr 19, 2021 3:20 pm

Re: Gantt Annotations

In the end it proved too unreliable to match the x with the xAxis for annotations, so I went with https://api.highcharts.com/gantt/xAxis.plotBands instead.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt Annotations

Hi OleVik,
Thanks for contact us with your questions.

The simplest way will be use plotBands, I prepared demo were I created plotBands on xAxis.

Demo:
https://jsfiddle.net/BlackLabel/nmcpe9u6/

API Reference:
https://api.highcharts.com/gantt/xAxis.plotBands

Let me know if this solution is fit for your goals.
Best regards.
Sebastian Hajdus
Highcharts Developer
OleVik
Posts: 4
Joined: Mon Apr 19, 2021 3:20 pm

Re: Gantt Annotations

It is, and I got where I wanted to with plotBands:
Diagram.png
Diagram.png (78.24 KiB) Viewed 3304 times
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt Annotations

That's great to hear! :)

In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer
yuanzhang
Posts: 2
Joined: Thu May 27, 2021 3:09 am

Re: Gantt Annotations

sebastian.h wrote: Thu Apr 22, 2021 7:49 am Hi OleVik,
Thanks for contact us with your questions.

The simplest way will be use plotBands, I prepared demo were I created plotBands on xAxis.

Demo:
https://jsfiddle.net/BlackLabel/nmcpe9u6/

API Reference:
https://api.highcharts.com/gantt/xAxis.plotBands

Let me know if this solution is fit for your goals.
Best regards.
Hi sebastian,
I just face some difficulty with plotBands.
I wonder know whether I can choose yAxis position of bands in case that I dont need bands covering whole yAxis?
And is there any way to control the opacity of bands?
Expecting your reply.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt Annotations

Hi yuanzhang!
Welcome to our forum and thanks for contacting us with your question.

You have possible to render your own background in the place that you want, look at example below.
artakserkses wrote: Wed Apr 21, 2021 1:37 pm For drawing somethings check this topic:
viewtopic.php?f=19&t=46236

I talked there with sebastian about drawing just recently :) (and there is this example https://jsfiddle.net/BlackLabel/xmg31aez/ of rectangles)

If you want to add opacity, you can use color format RGBA, and modify the last property.
https://jsfiddle.net/BlackLabel/hxkndrub/
https://www.w3schools.com/css/css_image ... arency.asp

Let me know how if was where that you looking.
Best regards.
Sebastian Hajdus
Highcharts Developer
yuanzhang
Posts: 2
Joined: Thu May 27, 2021 3:09 am

Re: Gantt Annotations

Thanks for your reply,sebastian.
I want to achieve result like example below.
https://jsfiddle.net/nxu0b5qm/
The problem is I cant get accurate pointWidth of last series whose color is red when I want to suit its height to "Marketing" axis's.Do you have some suggestions to make it? I know option called staticScale can get value I want.But when I set chart-height to percentage,it will lose the value. :(
By the way,I find that series will cover another one's lable even though I set its opacity as 0.Is it a bug or special setting?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt Annotations

Hi,

I log this series inside chart.events.load()

Code: Select all

    events: {
      load: function() {
        var chart = this;
        console.log(chart.series[3]);
      }
    }

I don't think so that staticScale will good option for adjust height points.
I removed the sets for the point width heights and it adjusted automatically.

Live demo:
https://jsfiddle.net/BlackLabel/gvhj71tk/

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”