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

[JesusuC]

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 --> https://www.highcharts.com/demo/gantt/r ... 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

[jedrzej.r]

Hi!

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: https://codesandbox.io/s/highcharts-rea ... 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: https://jsfiddle.net/gh/get/library/pur ... 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 series.data:

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
  chart.yAxis[0].update({
  	// 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:
https://github.com/highcharts/highcharts-react
https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/class-refere ... xis#update

Let me know if you have any further questions!
Best regards!