Bar-charts-react NPM

bar-charts

This is a flexible and self-adaption bar charts. you can choose some properties as you like to make the bar charts as you want.

Installation

npm install bar-charts-react --dev / yarn add bar-charts-react --dev

Example

import React, {Component} from "react";
import ReactDOM from "react-dom";
import BarCharts from "bar-charts-react";

class Demo extends Component {
    render() {
        return (
            <BarCharts scaleDirectionY={"left"} xAxisScaleAlign={"side"} xAxisTxtAlign={"center"} firstScaleY={false} firstScaleX={true}
                       yAxisTextAlign={"right"} gridDashX={[5, 5, 5]} markLineDash={[2, 4, 2, 4]} barPaddinng={10} markIndex={5}/>
        );
    }
}

ReactDOM.render(<Demo/>, document.getElementById("root"));

Properties

属性	说明	类型	默认值	可选值
width	画布宽	number	设备屏幕可视宽度值
height	画布高	number	300
xAxisDatas	X轴相关数据	array	BASE_X_AXIS（见./utils/globalConst.js）
yAxisDatas	Y轴相关数据	array	BASE_Y_AXIS（见./utils/globalConst.js）
rePainting	重新绘制	function	见demo中如何使用的
markIndex	显示指定柱子标记索引值	number	"none"
font	基础文字大小以及字体样式	string	20px Arial
textMargin	文字距离刻度线边距	number	10
leftTopTitle	左上角标题内容	string	利率%
ltopTitleColor	左上角标题颜色	string	#91939E
ltopTitleFont	左上角标题文字大小及字体样式	string	24px Arial
ltopTitleTips	左上角标题后提示小文本内容	string	(档位左包含)
ltopTitleTipsFont	左上角标题后提示文字大小及字体样式	string	16px Arial
ltopTitleTipsColor	左上角标题后提示文字颜色	string	#BFC1CC
ltopTitleMargin	左上角标题距离Y轴边距	number	30
scaleLength	刻度线长度	number	6
scaleDirectionY	Y轴刻度线防线	string	"left"
scaleBoundaryGap	最后一根刻度线距离轴线尾部边界值	number	20
scaleTextFont	刻度线对应文字大小及字体样式	string	20px Arial
scaleTextColor	刻度线对应文字颜色	string	#BFC1CC
yAxisTextAlign	Y轴刻度线文字左对齐还是右对齐	string	left
firstScaleX	X轴0点刻度线是否需要	boolean	true
firstScaleY	Y轴0点刻度线是否需要	boolean	false
axisColor	轴线颜色	string	#BFC1CC
gridDashX	平行于X轴的网格线使用虚线样式	array	undefined
gridColorX	平行于X轴的网格线颜色	string	#BFC1CC
xAxisScaleAlign	X轴的刻度线关于柱子对齐方式	string	side	side / center
xAxisTxtAlign	X轴文字关于刻度线对齐方式	string	center	center / between
barPadding	柱子内边距	number	0
barBgColor	柱子背景色	array	BAR_BG_COLOR（见./utils/globalConst.js）
markLineColor	标记线颜色	string	#ff3822
markLineWidth	标记线宽度	number	2
markLineDash	标记线使用虚线样式	array	undefined
circlePointColor	标记圆点背景色	string	#ff3822
circlePointRadius	标记圆点半径	number	8
roundRectRadius	标记圆角矩形半径	number	18
roundRectPadding	标记圆角矩形内边距	string	8, 26
roundRectMargin	标记圆角矩形距离标记圆点距离	number	10
roundRectBgColor	标记圆角矩形背景颜色	string	#ff3822
markFont	标记文本字体大小及字体样式	string	20px Arial
markTextColor	标记文本字体颜色	string	#fff

Question

If you encounter any problems during use the bar-charts, you can go to the bar-charts-react library in github and leave your issue for me. I'll deal with the issue as soon as I see it