https://github.com/consoletvs/chartisanreact

React adapter for any chartisan front-end on the web
https://github.com/consoletvs/chartisanreact

Last synced: 10 months ago
JSON representation

React adapter for any chartisan front-end on the web

• Host: GitHub
• URL: https://github.com/consoletvs/chartisanreact
• Owner: ConsoleTVs
• Created: 2020-06-03T08:05:10.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T06:14:40.000Z (almost 2 years ago)
• Last Synced: 2025-08-21T19:12:15.989Z (10 months ago)
• Language: TypeScript
• Size: 2.85 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# @eternum/chartisan_react

> React adapter for any chartisan front-end on the web

[![NPM](https://img.shields.io/npm/v/@eternum/chartisan_react.svg)](https://www.npmjs.com/package/@eternum/chartisan_react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install @eternum/chartisan_react

```

## Usage

First create a Chart component and pass the Chartisan instance of your desired front-end library.

```tsx

import React, { FC } from 'react'

import { Chartisan, CC } from '@chartisan/echarts'

import { ChartisanChart, ChartProps } from '@eternum/chartisan_react'

export { useChartControls } from '@eternum/chartisan_react'

export type { CC }

export const Chart: FC> = (props) => {

  return 

}

```

Then you can use the Chart as a component and give it the needed options. You can also use the

chart controls to create, update or destroy charts.

```tsx

import React from 'react'

import { Chart, useChartControls, CC } from './Chart'

const randomData = (values: number) => Array.from({ length: values }, () => Math.floor(Math.random() * 100))

const data = () => ({

  chart: { labels: ['First', 'Second', 'Third'] },

  datasets: [

    { name: 'Sample 1', values: randomData(3) },

    { name: 'Sample 2', values: randomData(3) },

  ],

})

const App = () => {

  const controls = useChartControls({ initOnDemand: true })

  return (

    <>

       controls?.create({ data: data() })}>Create Chart

       controls?.update({ data: data(), background: true })}>Update Chart

       controls?.destroy()}>Destroy Chart

      

    >

  )

}

export default App

```

## License

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