Posts: 1
Joined: Wed May 17, 2023 12:29 pm

Filter and order in table information with various milestone in same row

Wed May 17, 2023 12:52 pm

Hi! I would like to know if the following can be done in React using HighCharts.

After reviewing examples on the official page and some from the internet, I have been able to confirm that it is possible to add milestones in the same row. However, I need this information to be displayed on the left-hand side, similar to a table as shown in the following example --> ... management . Additionally, I would like to add sorting and filtering functionality to this table, and have it refresh automatically after a filter or sort has been applied.

Is it possible to achieve this using HighCharts? I have also tried using the implementation of ChatGPT from the documentation, but it wasn't helpful.

Many thanks in advance

Posts: 515
Joined: Tue Jan 24, 2023 11:21 am

Re: Filter and order in table information with various milestone in same row

Thu May 18, 2023 11:50 am


Welcome to our forum and thanks for reaching out to us with your question!

As for building Gantt Chart in React, you can start by editing this demo: ... ked-h7cpyq.

Defining yAxis as a table is made possible thanks to grid object, you can referer to this example where each column is defined differently: ... axis-table.

For sorting this data, you could either add eventListeners to column labels or add HTML buttons positioned under column to apply filtering. After that, you would have to define a sorting function and apply it to

Code: Select all

label.addEventListener('click', () => {
  data.sort(function(a, b) {
    return (a.end - a.start) - (b.end - b.start);
  chart.series[0].setData(data, false); // update series data with -> redraw: false
  	// update grid columns based on sorting applied
  });  // chart gets redrawn with default argument -> redraw: true
When the sorting is finished, you can update series and yAxis.grid.columns, so the corresponidng data is mutual.

References: ... es#setData ... xis#update

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”