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>
```