0

I have a requirement where I need to show date-picker in Gantt chart.

Instead of highlighted text I want date-picker

I know if I click on the date text in the chart I can see date-picker but my for requirement want to see date-picker only instead of date text in blue color.

Please let me know if that is possible to implement.

I have tried all the properties from documentation But I am not getting result I want

Michał
  • 773
  • 1
  • 1
  • 12
manshi44
  • 19
  • 3

1 Answers1

0

You can't set it using the API but it is possible to get to it, but you need a little more knowledge of the library itself.

First, you need to override the function responsible for hiding inputs:

Highcharts.RangeSelector.prototype.hideInput = Highcharts.noop;

and then in the callback function chart.events.render() call the rangeSelecotr object the showInput() method to enable their visibility. In addition, you can hide the text below them and move them slightly apart:

chart: {
  events: {
    render() {
      const rg = this.rangeSelector;

      rg.showInput('min');
      rg.showInput('max');
      rg.inputGroup.css({ opacity: 0 });
      rg.minInput.style.left = `${rg.minInput.style.left.match(/\d+/)[0] - 10}px`;
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/3ohwusm8/
API: https://api.highcharts.com/highcharts/chart.events.render

React demo: https://codesandbox.io/s/highcharts-react-forked-lvgs24?file=/index.js

Michał
  • 773
  • 1
  • 1
  • 12
  • Thanks Michal, Yes it works for me in plain javascript project. I am having react component and I am new to highcharts. How can I set this below property in my react project? Highcharts.RangeSelector.prototype.hideInput = Highcharts.noop; – manshi44 Jun 21 '23 at 14:01
  • In a very simple way, after importing Highcharts overwrite its functionality. I added domo to the answer. – Michał Jun 22 '23 at 13:18
  • Will it work for Gantt chart as well? And I am using React + typescript And can we change date format there in the date picker. I want something like 22-Jun-2023 – manshi44 Jun 22 '23 at 16:15
  • Yep, it works: https://codesandbox.io/s/highcharts-react-typescript-custom-wrap-lkzrdq – Michał Jun 23 '23 at 14:51
  • As for the question about changing the format, because it is an HTML input of date type, it is a more general question and there are many topics on this topic on SO: https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – Michał Jun 23 '23 at 14:56
  • I am getting this below error Property 'rangeSelector' does not exist on type '{ render(): void; }'.ts(2339) my code is just like yours Instead of functional component im using class based component – manshi44 Jun 25 '23 at 03:54
  • Can you reproduce it in an online editor then? – Michał Jun 26 '23 at 12:00
  • Hey Michal, I tried to reproduce but it works with react-typescript app. Here you can see https://stackblitz.com/edit/stackblitz-starters-sbnr4f?file=src%2FApp.tsx Actually I am building mendix widget using react, typescript and gantt chart highcharts. Not sure whats happening but if I add events to chart property I get this error. // Property 'rangeSelector' does not exist on type '{ render(): void; }'.ts(2339) // If you know any alternatives or fix for this one let me know – manshi44 Jun 26 '23 at 15:09