Migration steps do not work.

julianljk commented 6 years ago

We followed the migration steps and what used to work in 2.0 does not work in 3.0.

Before: amcharts-react2

After: amcharts-react3

Config: 
{
    "type": "serial",
    "theme": "light",
    "dataProvider": [
        {
            "PredictionCurveID": 6,
            "PredictionCurveName": "Mod Bell",
            "Point": 5,
            "PointOrder": 1,
            "isActive": true
        },
        {
            "PointOrder": 2,
            "Point": 8.947368421052632
        },
        {
            "PointOrder": 3,
            "Point": 21.578947368421055
        },
        {
            "PointOrder": 4,
            "Point": 74.21052631578945
        },
        {
            "PointOrder": 5,
            "Point": 137.36842105263156
        },
        {
            "PointOrder": 6,
            "Point": 74.21052631578945
        },
        {
            "PointOrder": 7,
            "Point": 55.26315789473685
        },
        {
            "PointOrder": 8,
            "Point": 44.73684210526316
        },
        {
            "PointOrder": 9,
            "Point": 38.421052631578945
        },
        {
            "PointOrder": 10,
            "Point": 33.94736842105263
        },
        {
            "PointOrder": 11,
            "Point": 26.052631578947363
        },
        {
            "PointOrder": 12,
            "Point": 21.578947368421055
        },
        {
            "PointOrder": 13,
            "Point": 19.05263157894737
        },
        {
            "PointOrder": 14,
            "Point": 17.210526315789473
        },
        {
            "PointOrder": 15,
            "Point": 14.73684210526316
        },
        {
            "PointOrder": 16,
            "Point": 10.789473684210522
        },
        {
            "PointOrder": 17,
            "Point": 8.736842105263158
        },
        {
            "PointOrder": 18,
            "Point": 7.157894736842106
        },
        {
            "PointOrder": 19,
            "Point": 5.789473684210526
        },
        {
            "PointOrder": 20,
            "Point": 5
        },
        {
            "PointOrder": 21,
            "Point": 5
        }
    ],
    "marginTop": 0,
    "marginBottom": 0,
    "marginLeft": 0,
    "hideCredits": true,
    "marginRight": 0,
    "autoMargins": false,
    "valueAxes": [
        {
            "dashLength": 0,
            "offset": -25,
            "axisAlpha": 0,
            "labelsEnabled": false,
            "gridAlpha": 0
        }
    ],
    "categoryAxis": {
        "gridAlpha": 0,
        "labelsEnabled": false,
        "axisAlpha": 0
    },
    "chartScrollbar": {
        "enabled": false
    },
    "colors": [
        "#95ac97"
    ],
    "graphs": [
        {
            "type": "column",
            "valueField": "Point",
            "fillAlphas": 0.8,
            "fixedColumnWidth": 5,
            "showBalloon": false,
            "fillColors": "#0F5D9E"
        }
    ],
    "categoryField": "PointOrder"
}

Followed migration steps from: <AmCharts.React {...config} /> to <AmCharts.React options={config}

Packages:

"dependencies": {
    "@amcharts/amcharts3-react": "^3.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
}

AmCharts 3 version (we're using amCharts source code that we serve from our local filesystem)

{
  "name": "amcharts3",
  "version": "3.19.0"
}

Pauan commented 6 years ago

Make sure you are specifying a width and height in the style:

<AmCharts.React
  style={{
    width: "100%",
    height: "500px"
  }}
  options={config} />

Also, remove width and height from config

julianljk commented 6 years ago

Yup! Adding

<AmCharts.React
  style={{
    width: "100%",
    height: "100%"
  }}
  options={config} />

worked for me. Thank you!

amcharts / amcharts3-react

Migration steps do not work. #62