amcharts / amcharts3-react

Official amCharts V3 React component
Apache License 2.0
118 stars 50 forks source link

How do I use methods if I use JSX? #89

Closed makesitenow closed 5 years ago

makesitenow commented 5 years ago

Hi,

I'm trying to make the method zoomToDates work on one of the charts on the page. Using JSX in render(). How do I reference the object in my code?

Thanks in advance

<AmCharts.React
className="serial-graph-a" options={{ "type": "serial", "theme": "light", "marginRight": 40, "marginLeft": 40, "autoMarginOffset": 20, "mouseWheelZoomEnabled":true, "dataDateFormat": "YYYY-MM-DD", "valueAxes": [{ "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth":true }], "balloon": { "borderThickness": 1, "shadowAlpha": 0,

                        },
                        "graphs": [{
                           "id": "g1",
                           "balloon":{
                            "drop":true,
                            "adjustBorderColor":false,
                            "color":"#ffffff",
                            "type": "smoothedLine"
                           },
                           "fillAlphas": 0.2,
                           "bullet": "round",
                           "bulletBorderAlpha": 1,
                           "bulletColor": "#FFFFFF",
                           "bulletSize": 5,
                           "hideBulletsCount": 50,
                           "lineThickness": 2,
                           "title": "red line",
                           "useLineColorForBulletBorder": true,
                           "valueField": "value",
                           "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
                        }],
                        "chartScrollbar": {
                           "graph": "g1",
                           "oppositeAxis":false,
                           "offset":30,
                           "scrollbarHeight": 80,
                           "backgroundAlpha": 0,
                           "selectedBackgroundAlpha": 0.1,
                           "selectedBackgroundColor": "#888888",
                           "graphFillAlpha": 0,
                           "graphLineAlpha": 0.5,
                           "selectedGraphFillAlpha": 0,
                           "selectedGraphLineAlpha": 1,
                           "autoGridCount":true,
                           "color":"#AAAAAA"
                        },
                        "chartCursor": {
                           "pan": true,
                           "valueLineEnabled": true,
                           "valueLineBalloonEnabled": true,
                           "cursorAlpha":1,
                           "cursorColor":"#258cbb",
                           "limitToGraph":"g1",
                           "valueLineAlpha":0.2,
                           "valueZoomable":true
                        },
                        "valueScrollbar":{
                         "oppositeAxis":false,
                         "offset":50,
                         "scrollbarHeight":10
                        },
                        "categoryField": "date",
                        "categoryAxis": {
                           "parseDates": true,
                           "dashLength": 1,
                           "minorGridEnabled": true,
                           "minPeriod": "hh",
                           "dateFormats": [{
                                  "period":"fff",
                                  "format":"JJ:NN:SS"
                                }, {
                                  "period":"ss",
                                  "format":"JJ:NN:SS"
                                }, {
                                  "period":"mm",
                                  "format":"JJ:NN"
                                }, {
                                  "period":"hh",
                                  "format":"JJ:NN"
                                }, {
                                  "period":"DD",
                                  "format":"EEEE MMM DD"
                                }, {
                                  "period":"WW",
                                  "format":"MMM DD"
                                }, {
                                  "period":"MM",
                                  "format":"MMM"
                                }, {
                                  "period":"YYYY",
                                  "format":"YYYY"
                                }]
                        },
                        "dataProvider": [ {
                           "date": "2012-07-29",
                           "value": 15
                        }, {
                           "date": "2012-07-30",
                           "value": 16
                        }, {
                           "date": "2012-07-31",
                           "value": 18
                        }, {
                           "date": "2012-08-01",
                           "value": 13
                        }, {
                           "date": "2012-08-02",
                           "value": 22
                        }, {
                           "date": "2012-08-03",
                           "value": 23
                        }, {
                           "date": "2012-08-04",
                           "value": 20
                        }, {
                           "date": "2012-08-05",
                           "value": 17
                        }],
                    }} />
makesitenow commented 5 years ago

Figured it out. Thanks