This library is create Line chart by ChartJS, react-chartjs-2

Support PointElement,LineElement,BarElement,

Getting started

npm i chart-ssb

or

yarn add chart-ssb

How to use

ReactJS

import { ChartSSB } from "chart-ssb"

NextJS

import dynamic from "next/dynamic";
const ChartSSB = dynamic(() => import('chart-ssb').then((mod) => mod.ChartSSB), {ssr: false});

Example

<div style={{ width: "100%", height: "500px", position: "relative" }}>
    <ChartSSB
      type={"line"}
      title={"Test Title"}
      showTitle={false}
      label={"Test Label"}
      showLabel={false}
      tooltipLabel={"฿"}
      tooltipBackground={"#0c5ae5"}
      xAxisData={newX}
      yAxisData={newY}
      pointSize={4}
      pointColor={"#0C5AE5"}
      borderSize={3}
      lineColor={"#0C5AE5"}
      fill={true}
      fillHeight={500}
      fillStart={"rgba(12, 90, 229, 0.30)"}
      fillStop={"rgba(12, 90, 229, 0.0)"}
      tension={0.4}
      offset={true}
      stepSizeY={20}
      gridXDisplay={false}
      gridYDisplay={false}
      xLabelDisplay={true}
      yLabelDisplay={true}
      scroll={scroll}
      maxScreen={MAX_SCREEN}
      maxHeight={"500px"}
      tickXdisplay={scalesX}
      totalXlength={total_X_LENGTH}
      prevArrowStyle={{}}
      nextArrowStyle={{}}
    />
</div>

Attribute

| Attribute | type | options | | ----------------- | -------- | ------------------------------- | | type | string | "line", "bar", default {"line"} | | title | string | | | showTitle | bool | default {false} | | label | string | | | showLabel | bool | default {false} | | tooltipLabel | string | | | tooltipBackground | string | | | xAxisData | array | [] | | yAxisData | array | [] | | pointSize | int | | | pointColor | string | HEX, RGB, RGBA | | borderSize | int | | | lineColor | string | HEX, RGB, RGBA | | fill | bool | default {false} | | fillHeight | int | | | fillStart | string | HEX, RGB, RGBA | | fillStop | string | HEX, RGB, RGBA | | tension | float | | | animation | bool | default {false} | | offset | bool | default {false} | | stepSizeY | number | | | gridXDisplay | bool | default {false} | | gridYDisplay | bool | default {false} | | xLabelDisplay | bool | default {true} | | yLabelDisplay | bool | default {true} | | scroll | bool | default {false} | | maxScreen | number | screen width | | maxHeight | string | height as same as parent | | tickXdisplay | number | number of x tick to display | | totalXlength | number | total of xAxisData length | | prevArrowStyle | sx props | mui sx props style prev arrow | | nextArrowStyle | sx props | mui sx props style next arrow |