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
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">