Gooddata.UI - charts are not shown, table without formatting

Question

I am trying to finish the intro tutorial for Gooddata.ui. However, I am not able to see any chart. I can see loading bullets, but no charts.

To be more specific:

• a line chart is shown just for a short time and then it disappears (just a blick)
• a bar chart is not shown at all
• a table is shown without formatting

My code looks like this (I removed all the things from create-react-app) :

import React, { Component } from 'react';
import { LineChart, BarChart, Table } from '@gooddata/react-components';

...

class App extends Component {
render() {
    return (
        <div className="App">
           <div style={{ height: 300 }}>
                <Table
                    projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
                    measures={measures}
                />
            </div>
            <div style={{ height: 300 }}>
                <LineChart
                    projectId="xms7ga4tf3g3nzucd8380o2bev8oeknp"
                    measures={measures}
                    trendBy={attribute}
                    config={{
                        colors: [ '#14b2e2']
                    }}
                />
            </div>
        </div>
    );
}
}

export default App;

Please, could you help me to find the problem?

Answer 1

It looks you forgot to add the following line of the code to load the CSS:

import '@gooddata/react-components/styles/css/main.css';

See step 2 in part 6 of the tutorial.