Closed makesitenow closed 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 }], }} />
Figured it out. Thanks
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,