chartjs reactjs
npm i chartjs-react-js
Include chart.js and React and xlsx as dependencies.
Example Usage
Note: ---> type: multi chart only line with bar
| ChartJS | ||
| props | descriptions | type |
| title | chartjs | string |
| type | chartjs | 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'; |
| titleVisible | boolean; | |
| backgroundColor | chartjs | string|object|[]; |
| align | chartjs | start|"center"|"end"; //this.align |
| position | chartjs | 'top'|'left'|'bottom'|'right'|'chartArea'; |
| titleFont | chartjs | { size: number, fontColor: string, family: string, lineHeight:string, style: "normal" | "italic" | "oblique" | "initial" | "inherit", weight:100|200|300|400|500|600|700|800|900 } |
| xtitle | chartjs | string; |
| ytitle | chartjs | string; |
| labels | chartjs | Array [] |
| indexAxis | chartjs | x|"y"; |
| mode | chartjs | 'point'|'nearest'|'index'|'dataset'|'x'|'y'; |
| intersect | chartjs | boolean; |
| islegend | chartjs | boolean; |
| plugins | chartjs | object;//plugins, |
| xstacked | chartjs | boolean|object; |
| xAxesmin | chartjs | number|object; |
| xAxesmax | chartjs | number|object; |
| xtitleColor | chartjs | string|object; |
| xAxesstep | chartjs | number|object; |
| xlabelsFont | chartjs | { size: number, fontColor: string, family: string, lineHeight:string, style: "normal" | "italic" | "oblique" | "initial" | "inherit", weight:100|200|300|400|500|600|700|800|900 } |
| xgrid | chartjs | boolean |
| ystacked | chartjs | boolean|object; |
| yAxesmin | chartjs | number|object; |
| yAxesmax | chartjs | number|object; |
| ytitleColor | chartjs | string|object; |
| yAxesstep | chartjs | number|object; |
| ylabelsFont | chartjs | { size: number, fontColor: string, family: string, lineHeight:string, style: "normal" | "italic" | "oblique" | "initial" | "inherit", weight:100|200|300|400|500|600|700|800|900 } |
| ygrid | chartjs | boolean; |
| xlabelBackground | chartjs | string|object; |
| ylabelBackground | chartjs | string|object; |
| aspectRatio | chartjs | number; |
| responsive | chartjs | boolean; |
| yAxesRightAdd | chartjs | boolean|object; |
| yAxesLeftAdd | chartjs | boolean|object; |
| xAxesPosition | chartjs | boolean|object; |
| yAxesPosition | chartjs | boolean|object; |
| width | string; | |
| height | string; | |
| children | [Array<React.ReactNode>]; | |
| mobil | boolean; | |
| mobilMinSize | number; | |
| ticksYcallback | chartjs | Function; |
| ticksXcallback | chartjs | Function; |
| tooltipCallbacks | chartjs | Object; |
| style | chartjs | React.CSSProperties; |
| chartjs | Number; | |
| canvasid | chartjs | String; |
| layoutPadding | chartjs | number|{left:number,right:number,top:number,bottom:number}; |
| onClickLabel(e: ChartEvent, legendItem: LegendItem, legend: Function) | Function; | |
| labelsFont | chartjs | { size: number, fontColor: string, family: string, lineHeight:string, style: "normal" | "italic" | "oblique" | "initial" | "inherit", weight:100|200|300|400|500|600|700|800|900 } |
| usePointStyleLegend | chartjs | boolean; |
| usePointStyleTooltip | chartjs | boolean; |
| LegendPointStyle | chartjs | Function|"textrect"|'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle'| |
| onChartOptions(e:methodProps) | Function; | |
| downloadOptions | boolean; | |
| changeTypes | boolean; | |
| className | string; | |
| autoSkip | chartjs | boolean; |
| autoSkipPadding | chartjs | boolean; |
| maxLabelsRotation | chartjs | undefined; |
| minLabelsRotation | chartjs | undefined; |
| ChartjsNode | ||
| props | descriptions | type |
| id | number|string; | |
| type | chartjs | 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'; |
| label | chartjs | string; |
| order | chartjs | number; |
| data | chartjs | []; |
| dataViews | Array<pointViewProps>; | |
| hidden | chartjs | boolean; |
| backgroundColor | chartjs | string|Function|[]; |
| defaultbackgroundColor | string|[]; | |
| borderColor | chartjs | string|Function|[]; |
| borderWidth | chartjs | string|Function|[]; |
| tension | chartjs | number; //this.lineSmooth ? 0.4 : 0.000001, |
| fill | chartjs | origin| "start"|"end"|boolean; |
| spanGaps | chartjs | boolean; |
| stepped | chartjs | boolean|"before"|"after"|"middle"; |
| hoverBorderWidth | chartjs | number|undefined|Function; |
| hoverBackgroundColor | chartjs | string|undefined|Function |
| pointStyle | chartjs | Function|"textrect"|'circle' | 'cross' | 'crossRot' | 'dash' | 'line' | 'rect' | 'rectRounded' | 'rectRot' | 'star' | 'triangle'|HTMLImageElement| |
| hitRadius | chartjs | number|Function; |
| hoverRadius | chartjs | number|Function; |
| rotation | chartjs | number|Function; |
| borderDash | chartjs | Function|number|[]|undefined; |
| borderDashOffset | chartjs | Function|string; |
| radius | chartjs | number|Function; |
| borderAlign | chartjs | string; |
| hoverOffset | chartjs | string, |
| bgColor | string|Function; | |
| bdrColor | string|Function; | |
| categoryPercentage | chartjs | Number|Function; |
| barPercentage | chartjs | Number|Function; |
| base | chartjs | Number|Function; |
| linearGradient | chartjs | Function|{0:string,0.5:string,1:string}; |
| barThickness | chartjs | number|string; |
| maxBarThickness | chartjs | number; |
| minBarLength | chartjs | number; |
| pointTextAllShow | bar,line and pie point value show area | boolean; |
| pointTextAddFirstValue | value add first value | string; |
| pointTextAddLastValue | value add last value | string; |
| pointText | pointTextAllShow and dataViews >0 with true | boolean; |
| pointTextAbsvalue | value convert to value>0 | boolean; |
| pointDrop | only line and bar item show animation | boolean; |
| pointAllDrop | only line and bar item with pointDrop=true | boolean; |
look settings chart.js information and settings
import { ChartJS,ChartJSNode} from './chartjs-react-js';
<div style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center"}} >
<ChartJS
width="45vw"
height="250px"
yAxesmin={0}
indexAxis="x"
xtitle="xtitle"
ytitle="ytitle"
title="ChartJS Line"
position="top"
type="line"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
downloadOptions
changeTypes
>
<ChartJSNode
order={1}
data={[1,2,3,2,6]}
backgroundColor={Colors.ORANGE}
borderColor={Colors.HEADER_COLOR}
rotation={45}
pointStyle="rect"
type="pie"
label="dataline"
borderWidth={1}
borderColor="#fff"
pointTextAllShow
pointText
pointTextAddLastValue="%"
/>
</ChartJS>
<ChartJS
xstacked
ystacked
width="45vw"
height="250px"
pointText={true}
yAxesmin={0}
indexAxis="x"
title="ChartJS Pie"
position="top"
type="pie"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
changeTypes
downloadOptions
>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="pie"
label="data"
/>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="pie"
label="data"
/>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="pie"
label="data"
/>
</ChartJS>
<ChartJS
width="45vw"
height="250px"
pointText={true}
yAxesmin={0}
indexAxis="x"
title="ChartJS PolarArea"
position="top"
type="polarArea"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="polarArea"
label="data"
/>
</ChartJS>
<ChartJS
width="45vw"
height="250px"
yAxesmin={0}
indexAxis="x"
title="ChartJS Radar"
position="top"
type="radar"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="radar"
label="data1"
/>
<ChartJSNode
order={1}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="radar"
label="data2"
/>
<ChartJSNode
order={2}
data={RandomData(5, 50, 5).data}
backgroundColor={RandomData(5, 50, 5).colors}
rotation={45}
pointStyle="rect"
type="radar"
label="data3"
/>
</ChartJS>
<ChartJS
width="45vw"
height="250px"
yAxesmin={0}
indexAxis="x"
xtitle="xtitle"
ytitle="ytitle"
title="ChartJS Bar"
position="top"
type="bar"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
pointText
>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={Colors.ORANGE}
borderColor={Colors.HEADER_COLOR}
rotation={45}
pointStyle="rect"
type="bar"
label="data"
/>
</ChartJS>
<ChartJS
width="45vw"
height="250px"
yAxesmin={0}
indexAxis="x"
xtitle="xtitle"
ytitle="ytitle"
title="ChartJS Multi Bar"
position="top"
type="bar"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
>
<ChartJSNode
order={1}
data={RandomData(5, 50, 5).data}
backgroundColor={Colors.ORANGE}
borderColor={Colors.HEADER_COLOR}
rotation={45}
pointStyle="rect"
type="bar"
label="data"
/>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={Colors.ORANGE}
borderColor={Colors.PRİMARY_COLOR}
rotation={45}
pointStyle="rect"
type="line"
label="data"
pointText
pointTextAllShow
pointTextAddLastValue=" m2"
/>
</ChartJS>
<ChartJS
width="45vw"
height="500px"
yAxesmin={0}
indexAxis="y"
xtitle="xtitle"
ytitle="ytitle"
title="ChartJS Multi Bar"
position="top"
type="bar"
labels={RandomData(5, 50, 5).labels}
backgroundColor={Colors.TRANSPARENT}
>
<ChartJSNode
order={1}
data={RandomData(5, 50, 5).data}
backgroundColor={Colors.ORANGE}
borderColor={Colors.HEADER_COLOR}
rotation={45}
pointStyle="rect"
type="bar"
label="data"
/>
<ChartJSNode
order={0}
data={RandomData(5, 50, 5).data}
backgroundColor={Colors.ORANGE}
borderColor={Colors.PRİMARY_COLOR}
rotation={45}
pointStyle="rect"
type="line"
label="data"
/>
</ChartJS>
</div>
```