next-chartist
v1.1.3
Published
2024+ Next.JS React.JS Create responsive, scalable and good looking charts with chartist.js
Downloads
21
Maintainers
Readme
⚡React Blazing Fast SVG charts ⚡ (next-chartist)
A continuation of https://github.com/fraserxu/react-chartist. Feel free to push an update
Made with create-react-library
NPM Package: https://www.npmjs.com/package/next-chartist
Install
npm install --save next-chartist
or in _app or layout.tsx/jsx
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" async />
Usage
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
import React, { Component } from 'react'
import NextChartist from 'next-chartist'
class Example extends Component {
var type = "barChart"
var dataChart = {
labels: ["Speed"],
series: [1000]
}
var options = {
high: 2500,
low: 0,
reverseData: true,
distributeSeries: true,
horizontalBars: true,
chartPadding: {
right: 50
},
axisY: {
offset: 125,
onlyInteger: true
},
axisX: {
onlyInteger: true
}
}
render() {
return (
<NextChartist
className={'ct-octave'}
data={dataChart}
options={options}
type={type}
/>
)
}
}
License
MIT © poboisvert