Error: <g> attribute transform: Expected number, "translate(NaN,NaN) rotate(…".

[Han Jiang]

Hi guys,

I try to implement wordcloud series into my component, somehow I got this error

highcharts.js:53 Error: attribute transform: Expected number, "translate(NaN,NaN) rotate(…".

which moves the div into left.

Here is my code:

import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts'
import {connect} from 'react-redux'
import autobind from 'react-autobind'
import '../style.scss'
require('highcharts/modules/wordcloud.js')(ReactHighcharts.Highcharts)

class WordCloud extends Component {
    constructor(props) {
        super(props);
        autobind(this);
    }

    render() {
        const { keywords } = this.props
        console.log(keywords);
        let words = []
        keywords.map(data => {
            let obj = {}
            obj.name = data.word
            if(data.count < 100) {
                obj.weight = 5
            } else {
                obj.weight = 6
            }
            words.push(obj)
        })
        
        let config = {
                series: [{
                type: 'wordcloud',
                data: words,
                name: 'Occurrences',
                title: {
                    text: 'Sentimantal Wordcloud'
                }
            }]
        }
        return (
            <ReactHighcharts config = {config}></ReactHighcharts>
        );
    }
}

const mapStateToProps = (state) => {
    const { keywords } = state.places
    return { keywords }
}

export default connect(mapStateToProps)(WordCloud)

[Ilya Netkach]

Did you find a solution?

[Dan Jewett]

I am also running into this issue. I found that this may have been patched in the latest version of highcharts: highcharts/highcharts#8184 . Is this library up-to-date with the latest?

[Dan Jewett]

It appears that this library is using 6.0.4 while highcharts latest is on 6.1.1. However, the bug fix is applied in master, but a release has not been pushed. Perhaps in 6.1.2 this issue would be fixed. Then this library needs to update highcharts to the latest.

[ZealotTKO]

I am running into this issue, too. Dumb question but what do you mean by "div into left". Also, has anyone found a workaround to this?

[Kirill Cherkashin]

Closing and there has been no activity in this issue for a while.
if this is still relevant, please feel free to reopen