Search code examples
javascriptreactjschartsamcharts

Initial date range using amchart's gantt

I am using Amchart's Gantt chart. The segments are divided by dates.

I need the chart's navigator initial location will be between two dates, and not to be applied all over the chart.

the current behavior: enter image description here

The expected result: enter image description here

I tried adding 'startDate' and 'endDate' but without success.

my Amchat;s configurations:

<AmCharts.React
            className="my-class"
            style={{
                width: '50%',
                height: '250px'
            }}
            options={
                {
                    "height": "500",
                    "hideCredits":true,
                    "type": "gantt",
                    "theme": "light",
                    "marginRight": 70,
                    "period": "DD",
                    "dataDateFormat": "YYYY-MM-DD",
                    "columnWidth": 0.45,
                    "valueAxis": {
                        "type": "date"
                    },
                    "graph": {
                        "lineAlpha": 1,
                        "lineColor": "#fff",
                        "fillAlphas": 0.85,
                        "showAllValueLabels": false,
                        "cornerRadiusTop": 4
                    },
                    "rotate": true,
                    "categoryField": "category",
                    "segmentsField": "segments",
                    "colorField": "color",
                    "startDateField": "start",
                    "endDateField": "end",
                    "dataProvider": this.state.dataProvider,
                    "valueScrollbar": {
                        "selectedBackgroundColor": '#f3faff',
                        "selectedBackgroundAlpha": 1,
                        "autoGridCount": false
                    },
                    "chartCursor": {
                        "cursorColor": "#55bb76",
                        "valueBalloonsEnabled": false,
                        "cursorAlpha": 0,
                        "valueLineAlpha": 0.5,
                        "valueLineBalloonEnabled": false,
                        "valueLineEnabled": false,
                        "zoomable": false,
                        "valueZoomable": true
                    },
                    "export": {
                        "enabled": false
                    }
                }
            }
        />

Thanks.

Solution

  • You can use "zoomToDates(start, end)" property of AmGanttChart. Here is the relevant reference:
    AmGanttChart | JavaScript Charts v. 3 | amCharts

    Also you can find the usage of the property from that question:
    AM Charts initial view using zoomToDates