# chartx

> Data Visualization Chart Library

Latest version **1.1.195** (published 2025-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartx
pnpm add chartx
yarn add chartx
bun add chartx
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 1.1.195 |
| Published | 2025-11-19 |
| First published | 2017-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 9.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nickli |
| Maintainers | nickli |
| Keywords | chartx, chart, canvas, webgl, 2d, Data, Visualization |

## Links

- npm: https://www.npmjs.com/package/chartx
- Repository: git
- Homepage: https://thx.github.io/chartx/
- npm.io page: https://npm.io/package/chartx

## Dependencies (7)

- [fmin](https://npm.io/package/fmin.md) 0.0.2
- [vec2](https://npm.io/package/vec2.md) 1.6.1
- [dagre](https://npm.io/package/dagre.md) 0.8.5
- [canvax](https://npm.io/package/canvax.md) ^2.0.91
- [numeral](https://npm.io/package/numeral.md) 2.0.6
- [d3-force](https://npm.io/package/d3-force.md) ^2.1.1
- [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) 1.1.5

## 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.1.195 (latest) — 2025-11-19
- 1.1.193 — 2025-06-10
- 1.1.192 — 2025-06-09
- 1.1.191 — 2025-06-09
- 1.1.190 — 2025-06-09
- 1.1.189 — 2025-06-08
- 1.1.188 — 2025-06-03
- 1.1.186 — 2025-05-22
- 1.1.185 — 2025-01-06
- 1.1.184 — 2024-11-04
- 1.1.183 — 2024-10-23
- 1.1.182 — 2024-10-12
- 1.1.181 — 2024-09-09
- 1.1.180 — 2024-07-29
- 1.1.179 — 2024-07-29
- … 333 more at https://npm.io/package/chartx/versions

## README

chartx2.0 代码规范
=================

* 配置使用规范约定

  首先，chartx2.0 和之前的版本使用方式保持一致，需要有 dom 节点， data数据，和配置。

  不同的是2.0中数据支持行列式的数据格式

  ```javascript
  var data = [
      [ "xfield", "uv", "pv" ],
      [ 1       ,  2  ,  3   ],
      [ 2       ,  3  ,  4   ]
  ]
  ```

  同时也支持json格式列表
   ```javascript
  var data = [
      { xfield: 1, uv:2, pv:3  },
      { xfield: 1, uv:2, pv:3  },
      { xfield: 1, uv:2, pv:3  }
  ]
  ```
  chartx会主动识别并且处理，只要符合其中一种数据格式，你就只管塞就好了。

  然后，chartx2.0中 所有的图标类型都会提供一份根据数据来得默认配置，也就是说，你可以只要有数据，不用些任何配置，就可以创建一个图表：

  ```javascript
  Chartx.Line( "dom" , data, {} ) 
  //最后面的那个配置可以不要，Chartx.Line( "dom" , data )
  //那么比如在直角坐标系中，我们会默认拿第一个字段xfield作为xAxis.field, 其他字段都作为yAxis.field
  ```



  chartx2.0 相比1.xxx 更加纯粹的采用了组件式配置的原则，比如一个直角坐标系的折线图line，它的配置会是这样

  ```javascript
  //其中除开coordinate 和 graphs 默认会有以外，其他的所有 组件 都是组装式的，在options 里面组装了这个组件，才会有对应的功能，2.0里面包括tips也不再默认放出（ 这么多年的经验得出，默认的tips基本没有可看性，项目里面基本会对tips.content重构 ）
  var options = {
      coordinate : {
          xAxis : {},
          yAxis : {}
      },
      graphs : {

      },
      legend : {

      },
      markLine : {

      },
      markPoint : {

      },
      dataZoom: {

      },
      tips : {

      }
  }
  ```

  * 图表类视图规划

    2.0中，把图表区 按照坐标系类别分类，而不在是单独个图表类型，各自写各自的逻辑代码

    + Chart
        + Descartes(笛卡尔坐标系)
            - bar 
            - line
            - bar_line
            - bar_tgi
            - scat
        + Polar(极坐标系)
            - Pie
            - Dingle（丁格尔玫瑰图）
            - Planet （星云图）
        + Other


  * 接口约定规范

  ** chart 图表基类

     1，这次添加了组件管理机制 components

     2，然后，对于reset 和 resetData两个接口，这次做了绝对清晰的划分，也就是reset 实质上和重新绘制是一回事，而resetData却仅仅是数据的变化，然后调用各个组价的resetData 来实现整体数据的更新（ 之前版本里做的太复杂，reset会去计算用户reset的意图，比如reset里少了个yAxis的字段，那么就会自动remove掉一条线，这是个大坑，而且性价比非常低，但是代码量和可维护性非常低 ）

  ** descartes 笛卡尔系统类（ bar,line,scat 等都继承自该类 ）


  简单代码约定规范

  _coordinate 为实例
  coordinate 为配置


  交互事件的规范
  1.xx 版本中，所有的事件都是在 chart.on("nodeclick") 等这样的层面实现的

  2.0中，所有的事件都写入到配置中去

  比如在scat中得节点点击事件

 ```javascript
  graphs : [
        {
            type : "scat",
            field : "money",
            groupField : "sex",
            node : {
                r : "house", 

                //事件直接注册到对于的配置中来，这样，减少了命名的麻烦，统一的命名，而且直观, 
                //一眼就知道在那些元素上面注册了事件
                onclick : function( nodeData, Graphs ){
                    debugger
                }
            }
        }
    ]
 ```
  
file:../canvax

直角坐标系的两类轴（xAxis,yAxis）,和极坐标系的两类轴（aAxis,rAxis ）， 都至少有field和ruler
ruler用来表示刻度ui，axis上面别的所有的属性都是逻辑属性，ruler用来控制是否有ui。

graphs 约定
所有得graphs中把所有的ui设置都归为了4个属性（这么多年的经验来看， 基本能满足目前为止的所有需求）
node --》 (对应一个数据节点，而不是ui元素)
line --》（多个数据节点的链接，在雷达图和line折线图中表现为用折线绘制连接）
area --》（同样地，表示多个数据节点的链接，然后有一个闭环，出现了一个面）
text --》 文本

所有组件对外影响的时候都会抛出一个 trigger对象 trigger对象包括comp（触发的组件）和params两个属性

nodeData, nodeElement ， data和图形之间互相引用的属性约定


颜色取值规则，只有undefined才会认为需要还原皮肤色
“” 或者 null 都会认为是用户主动想要设置的，就为是用户不想他显示


### 启动文档服务

docsify serve docs

---
_Source: https://npm.io/package/chartx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._