react-chartist displays solid black

Question

I'm using chartlist. http://fraserxu.me/react-chartist/

The data is not displaying correctly. The data is displaying like this:

When according to the docs it should be displaying like this:

Here is the code per the docs: http://fraserxu.me/react-chartist/

Here is my code:

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";



class PreBuy extends Component {


    render() {


        var simpleLineChartData = {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            series: [
                [12, 9, 7, 8, 5],
                [2, 1, 3.5, 7, 3],
                [1, 3, 4, 5, 6]
            ]
        }

        let style = {
            height: 400,
            position: "relative",
            top: 300
        }

        return (

            <section>
            <div style={style}>
                  <ChartistGraph data={simpleLineChartData} type={'Line'} />

            </div>




          </section>

        )

    }
}


export default PreBuy

score 5 · Accepted Answer · answered Jan 09 '19 at 00:18

5

You have to include css from bower CDN or import it to the project.

Look at documentation

e.g. Include to your index.html:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

answered Jan 09 '19 at 00:18

31113

399
4
18

1

I am using create-react-app and the following works. Above my react component I did: import './reactChartlist.css'; // Import regular stylesheet ; – William Jan 09 '19 at 01:18
1

Here is the [source](https://github.com/gionkunz/chartist-js/tree/master/dist) to download `css` or `scss` you would like to use – 31113 Jan 09 '19 at 01:27
Yes, I copied the CSS source into the file I mentioned above. Thanks! – William Jan 09 '19 at 19:42
@William i love you mate . You saved my day ! – PandaMastr Aug 13 '19 at 09:19

react-chartist displays solid black

1 Answers1