AlexeyCanyon
Posts: 12
Joined: Thu Jan 14, 2021 4:48 am

Grouped categories with Gantt chart.

Hi! I'm developing a project in Typescript. I found a plugin for grouping categories, it's called "highcharts-grouped-categories". Since this package does not include types, I manually added them.

Code: Select all

import { YAxisOptions } from 'highcharts';

declare module 'highcharts' {
  interface IGroupedCategory {
    name: string;
    caregories: string[];
  }

  export interface YAxisOptions<D extends object> {
    categories: string[] | IGroupedCategory;
  }
}
But I got some kind of image artifact (a line running through all the categories). Please help me understand what the problem is?
https://ibb.co/F3PfXS4
The configuration of settings for the chart is attached below.
Please tell me the general type of graph for explicit typing it in ref.

Code: Select all

import React, { FC, useRef } from 'react';
import Highcharts, { Options } from 'highcharts';
import HighchartsGantt from 'highcharts/modules/gantt';
import HighchartsReact from 'highcharts-react-official';
import CategoriesPlugin from 'highcharts-grouped-categories';
import CustomEvents from 'highcharts-custom-events';
import { mockData } from './Chart.constants';

CustomEvents(Highcharts);
HighchartsGantt(Highcharts);
CategoriesPlugin(Highcharts);
const Chart: FC = () => {
  // What type should I replace the any type with?
  const chart = useRef<any>(null);

  const options: Options = {
    chart: {
      animation: false, 
      type: 'xrange',
      panning: {
        enabled: true,
        type: 'x',
      },
      panKey: 'shift',
    },
    series: [{
      type: 'xrange',
      data: mockData,
      dataLabels: {
        enabled: true
      },
    }],
    title: {
      text: 'Car Rental Schedule'
    },
    tooltip: {
      pointFormat: '<span>Rented To: {point.rentedTo}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
    },
    navigator: {
      height: 100,
      enabled: true,
      handles: {
        enabled: false,
      },
      yAxis: {
        min: 0,
        max: 60,
      },
      series: {
        dataLabels: {
          padding: 0,
        }
      }
    },
    rangeSelector: {
      enabled: true,
    },
    yAxis: [{
      tickWidth: 1,
      categories: [{
        name: 'America',
        categories: ['USA', 'Canada', 'Mexico']
      }, {
        name: 'Europe',
        categories: ['1', '2', '3']
      }]
    }],
  };

  return (
    <>
      <HighchartsReact
        constructorType="ganttChart"
        highcharts={Highcharts}
        options={options}
        ref={chart}
      />
    </>
  );
};

export default Chart;
Best regards.
Attachments
Снимок экрана 2021-01-19 121833.png
Снимок экрана 2021-01-19 121833.png (27.2 KiB) Viewed 1408 times
AlexeyCanyon
Posts: 12
Joined: Thu Jan 14, 2021 4:48 am

Re: Grouped categories with Gantt chart.

And one more question. Please tell me if it is possible to set the value of dataLabels in the data? Or is there only one way to set the dataLabels value (via formatter)?
I want to do something like this:

Code: Select all

{
  x: Date.UTC(2014, 10, 21),
  x2: Date.UTC(2014, 11, 2),
  y: 0,
  text: 'Name that xrange',
}
AlexeyCanyon
Posts: 12
Joined: Thu Jan 14, 2021 4:48 am

Re: Grouped categories with Gantt chart.

During the development, another question appeared. rangeSelector with default settings shifts the coverage area to the end of the previous date when zooming in. That is, when you change the scale from 5 years to 2 years, it will capture the last 2 years of those 5 years. Is it possible to change this setting and capture 2 years from the middle of 5 years? I hope I explained it clearly...
tell me another question about the forum. Is it better for me to throw general questions in another topic, and not to supplement the current topic?
https://jsfiddle.net/374es8wg/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Grouped categories with Gantt chart.

Hi!

Thanks for contacting us.
I need more time for analyze your case from this topic.

I think it will be good if you develop the plot continuously.
When I answer the questions you have asked, you can ask more, there is less chance that I will miss something.

And if the questions are about something else, you can write about a new topic, sometimes a different developer can take care of the new topic.

Keep in touch.
Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Grouped categories with Gantt chart.

Hi,

The grouped categories module isn't appropriate for the use of Gantt charts.
Because of this, you had a problem with types, and I don't know exactly what to replace type any, maybe with a generic type.
https://www.typescriptlang.org/docs/han ... -variables
There is no option to change the width of the yAxis axis, which is automatically calculated in relation to the text width.

Can you share your working setup in the online code editor?
I will try debugging them and looking workaround.

You have considered using other task grouping options?
https://www.highcharts.com/docs/gantt/g ... ping-tasks
Please tell me if it is possible to set the value of dataLabels in the data? Or is there only one way to set the dataLabels value (via formatter)?
You can use also data.dataLabels.format but what value do you want to show?

https://api.highcharts.com/gantt/series.xrange.data
https://api.highcharts.com/gantt/series ... dataLabels
Is it possible to change this setting and capture 2 years from the middle of 5 years?
This topic describe possible solution with set xAxis.setExtremes() method.
viewtopic.php?t=43891#p155317

​If you have further inquiries, you may reach out to me at any time.
Kind regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”