Arczi159
Posts: 4
Joined: Mon Aug 23, 2021 12:49 pm

angular component in "format"/miss colors after hide/adding left column

Hi

I have a few questions.

1. I want to add cell and in this cell add angular component. Is the way to do it ?

Image

2. When I collapse by Workstream 1 after "tasks" lose colors. How to fix it ?

Image

3. Is the way to add extra column with save grouped. I saw example with added but grouped was not available.

Image

I don't have jsfiddle. :/
Thank you very much for every moment and help
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: angular component in "format"/miss colors after hide/adding left column

Hi,
Thanks for contacting us with your question!

ad.1 The put there angular component under the x axis could be a little hard to achieve.
Do you think about render something by SVGRenderer instead of this?
https://jsfiddle.net/BlackLabel/ptoLr96q/
https://api.highcharts.com/class-refere ... derer#rect

ad.2 Could you replicate this behavior at jsFiddle?

ad.3 This extra column is y axis with looks like a table, they work only for axis type category, such as this example.
https://jsfiddle.net/BlackLabel/tfuL3sd2/

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
Arczi159
Posts: 4
Joined: Mon Aug 23, 2021 12:49 pm

Re: angular component in "format"/miss colors after hide/adding left column

Hi thank you for answer.

Ad 1. Ok good option I will think about it.
Ad 2. I updated higcharts to newer version and now it's working fine. (I had 6.2.0)
Ad 3. Could you explain me how can I do it.
I want to save "grouping" and can roll up.
In your example data is grouping but it's not my way.

Code for 3:

Code: Select all

this.chart = Highcharts.ganttChart('mmap_container', {credits: {
      enabled: false
    },
    yAxis: [{
      grid: {
        borderWidth: 0
      },
    }],
    xAxis: [{
      labels: {
        format: '{value:%b}'
      },
      min: Date.UTC(2014, 7, 19),
      max: Date.UTC(2014, 11, 30)
    }],
    plotOptions: {
      gantt: {
        borderRadius: 10
      }
    },
    series: [{
      type: 'gantt',
      data: [{
        name: '<rag> Workstream 1',
        id: 'w1',
        start: Date.UTC(0, 0, 0),
        end: Date.UTC(0, 0, 0)
      }, {
        name: 'Workstream 2',
        id: 'w2',
        start: Date.UTC(0, 0, 0),
        end: Date.UTC(0, 0, 0)
      }, {
        parent: 'w1',
        id: 'a',
        name: 'Task 1',
        start: Date.UTC(2014, 7, 20),
        end: Date.UTC(2014, 10, 25),
        completed: {
          amount: 0.2,
          fill: "#0f4775"
        },
        color: "#dddddd"
      }, {
        parent: 'w1',
        id: 'bb',
        name: 'Task 2',
        start: Date.UTC(2014, 8, 20),
        end: Date.UTC(2014, 11, 25),
        completed: {
          amount: 0.5,
          fill: "#0f4775"
        },
        color: "#dddddd"
      }, {
        parent: 'w2',
        name: 'Task 3',
        start: Date.UTC(2014, 10, 27),
        end: Date.UTC(2014, 11, 29),
        completed: {
          amount: 0.2,
          fill: "red"
        },
        color: "#dddddd"
      }
      ]
    }]});
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: angular component in "format"/miss colors after hide/adding left column

Hi,

The type of axis needs to be a category to implement an axis look like a table, in your example it's impossible.

You can try to render the tables, but if the rows change, get additional data and grow the label will start to have different sizes.

Code: Select all

 yAxis: {
    type: 'category',
 }

Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”