Skip to content

gravity-ui/chartkit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e1c916b · Dec 20, 2022
Oct 3, 2022
Dec 14, 2022
Dec 20, 2022
Dec 8, 2022
Jan 20, 2022
Aug 1, 2022
Nov 16, 2022
Jan 20, 2022
Jan 20, 2022
Oct 3, 2022
Oct 3, 2022
Dec 20, 2022
Jan 20, 2022
Jan 20, 2022
Jan 20, 2022
Dec 7, 2022
Jul 14, 2022
Dec 8, 2022
Dec 20, 2022
Dec 20, 2022
Oct 3, 2022
Jan 20, 2022

Repository files navigation

@gravity-ui/chartkit · license npm package

React component used to render charts based on any sources you need

Install

npm i --save-dev @gravity-ui/chartkit @gravity-ui/uikit

Make sure you have @gravity-ui/uikit styles enabled in your project.

import '@gravity-ui/uikit/styles/styles.scss';

Usage

import {ThemeProvider} from '@gravity-ui/uikit';
import ChartKit, {settings} from '@gravity-ui/chartkit';
import {YagrPlugin, YagrWidgetData} from '@gravity-ui/chartkit/build/plugins';

import '@gravity-ui/uikit/styles/styles.scss';

settings.set({plugins: [YagrPlugin]});

const data: YagrWidgetData = {
  data: {
    timeline: [
      1636838612441, 1636925012441, 1637011412441, 1637097812441, 1637184212441, 1637270612441,
      1637357012441, 1637443412441, 1637529812441, 1637616212441,
    ],
    graphs: [
      {
        id: '0',
        name: 'Serie 1',
        color: '#6c59c2',
        data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
      },
      {
        id: '1',
        name: 'Serie 2',
        color: '#6e8188',
        data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
      },
    ],
  },
  libraryConfig: {
    chart: {
      series: {
        type: 'line',
      },
    },
    title: {
      text: 'line: random 10 pts',
    },
  },
};

function App() {
  return (
    <ThemeProvider>
      <div className="app" style={{height: 500}}>
        <ChartKit type="yagr" data={data} />
      </div>
    </ThemeProvider>
  );
}

export default App;