https://github.com/poboisvert/next-chartist

⚛ NPM Package for React Chartist.js component - 1.5K+ Downloads
https://github.com/poboisvert/next-chartist

chartist chartist-library library nextjs nextjs13 nextjs14 npm react-chartist reactjs

Last synced: 10 days ago
JSON representation

⚛ NPM Package for React Chartist.js component - 1.5K+ Downloads

• Host: GitHub
• URL: https://github.com/poboisvert/next-chartist
• Owner: poboisvert
• Created: 2024-04-29T22:39:34.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-16T23:11:52.000Z (4 months ago)
• Last Synced: 2024-10-27T09:18:51.326Z (24 days ago)
• Topics: chartist, chartist-library, library, nextjs, nextjs13, nextjs14, npm, react-chartist, reactjs
• Language: JavaScript
• Homepage: https://miro.medium.com/v2/resize:fit:720/format:webp/1*JD93nmwkfsG4Suoi43daMQ.jpeg
• Size: 729 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 monthly downloads](https://img.shields.io/npm/dm/next-chartist.svg?style=flat)](https://npmjs.org/package/next-chartist)

[![NPM total downloads](https://img.shields.io/npm/dt/next-chartist.svg?style=flat)](https://npmjs.org/package/next-chartist)

NPM Package: https://www.npmjs.com/package/next-chartist

## Install

```bash

npm install --save next-chartist

```

or in \_app or layout.tsx/jsx

```bash

```

## Usage

```

```

```jsx

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 (

      

    )

  }

}

```

## License

MIT © [poboisvert](https://github.com/poboisvert)