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:
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,
}
);
}