Highcharts official support forum

Posted: **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 --> 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

Posted: **Thu May 18, 2023 11:50 am**

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!

Highcharts official support forum

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

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

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