# flex-chart > Flexible charts that encapsulate the automated layout processing of echarts Latest version **1.2.5** (published 2023-01-09) · MIT license · 0 weekly downloads ## Install ```sh npm install flex-chart pnpm add flex-chart yarn add flex-chart bun add flex-chart ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.5 | | Published | 2023-01-09 | | First published | 2022-08-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 147.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | liushanbao | | Maintainers | wenmulsb | | Keywords | echarts, echarts-for-react, charts, react-echarts, react, component, echarts-react, echarts, chart, graph, react-component | ## Links - npm: https://www.npmjs.com/package/flex-chart - Repository: https://github.com/lsbFlying/flex-chart - Issues: https://github.com/lsbFlying/flex-chart/issues - npm.io page: https://npm.io/package/flex-chart ## Dependencies (3) - [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2 - [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3 - [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.2.5 (latest) — 2023-01-09 - 1.2.4 — 2023-01-09 - 1.2.3 — 2023-01-06 - 1.2.2 — 2023-01-06 - 1.2.1 — 2023-01-06 - 1.2.0 — 2023-01-05 - 1.1.0 — 2023-01-05 - 1.0.0 — 2023-01-04 - 1.0.0-alpha.1 — 2022-09-29 - 0.1.0-alpha.1 — 2022-09-20 - 0.1.0 — 2022-08-31 - 0.0.1 — 2022-08-26 ## README

FlexChart

**fl**ex **ch**art

Chart with automatic boundary layout size processing (encapsulated echarts)

[![GitHub license](https://img.shields.io/github/license/lsbFlying/flex-chart?style=flat-square)](https://github.com/lsbFlying/flex-chart/blob/master/LICENSE) [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/lsbFlying/flex-chart/test.yml?color=blue&style=flat-square)](https://github.com/lsbFlying/flex-chart/actions/workflows/test.yml) [![npm type definitions](https://img.shields.io/npm/types/typescript?color=orange&style=flat-square)](https://github.com/lsbFlying/flex-chart/blob/master/src/flex-chart/index.tsx) [![npm](https://img.shields.io/npm/v/flex-chart?color=brightgreen&style=flat-square)](https://www.npmjs.com/package/flex-chart)
--- ### Install ```sh npm i flex-chart # yarn add flex-chart # `echarts` is the peerDependence of `flex-chart`, you can install echarts with your own version. npm install --save echarts ``` ### Features - Automatic processing of boundary size layout - Automatic adjustment of component container layout size change ### Usage ```tsx import { FlexChart } from "flex-chart"; const mockData = [ { name: "ClothingClothingSalesVolume", data: [ {name: "shirt", value: 50}, {name: "cardigan", value: 200}, {name: "chiffon-shirt", value: 360}, {name: "trousers", value: 100}, {name: "high-heeled-shoes", value: 100}, {name: "socks", value: 560}, ], }, { name: "ClothingClothingStock", data: [ {name: "shirt", value: 20}, {name: "cardigan", value: 90}, {name: "chiffon-shirt", value: 170}, {name: "trousers", value: 30}, {name: "high-heeled-shoes", value: 208}, {name: "socks", value: 120}, ], }, { name: "ClothingClothingDamage", data: [ {name: "shirt", value: 50}, {name: "cardigan", value: 230}, {name: "chiffon-shirt", value: 80}, {name: "trousers", value: 101}, {name: "high-heeled-shoes", value: 70}, {name: "socks", value: 302}, ], }, { name: "ClothingClothingReturn", data: [ {name: "shirt", value: 37}, {name: "cardigan", value: 113}, {name: "chiffon-shirt", value: 59}, {name: "trousers", value: 91}, {name: "high-heeled-shoes", value: 34}, {name: "socks", value: 207}, ], }, ]; function App() { return (
); } ``` ### Documentation | Property | Description | Type | Default | |--------------|------------------------------------------------------------------|--------------------------|------------| | autoFit | adjust proportionally according to the page width | boolean | false | | autoResize | decide whether to trigger when parent component container resize | boolean | - | | barSeries | set bar series data option | [EChartOption.SeriesBar](./src/flex-chart/model/index.ts) | - | | data | data source | [FlexChartDataItem[]](./src/flex-chart/model/index.ts) | [] | | direction | chart direction | "vertical"
"horizontal"
"verticalInverse"
"horizontalInverse" | "vertical" | | initOpts | echarts initialization parameter configuration | [EchartsInitOpts](./src/flex-chart/model/index.ts) | - | | initTheme | echarts Initialization Style Theme Configuration | string | object | - | | lineSeries | set line series data option | [EChartOption.SeriesLine](./src/flex-chart/model/index.ts) | - | | mergeOption | whether to merge the echarts configuration | boolean | true | | onChartLoad | chart load event | (chartsInstance: [EChartsType](./src/flex-chart/model/index.ts)) => void | - | | onEvents | echarts mouse event monitoring | [FlexChartEventsType](./src/flex-chart/model/index.ts) | - | | options | configuration parameters of echarts | [EChartOption](./src/flex-chart/model/index.ts) | - | | seriesTypes | series data type | ("bar" | "line")
| ("bar" | "line")[] | - | ### License [MIT License](https://github.com/lsbFlying/flex-chart/blob/master/LICENSE) (c) [刘善保](https://github.com/lsbFlying) --- _Source: https://npm.io/package/flex-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._