1. Project Overview

UCharts - Cross-platform visualization chart library

UCharts is a cross-platform chart library implemented in TypeScript, with rich types, high performance, modularity, extensibility, and customizable themes. The underlying rendering logic is implemented in TypeScript, and the upper layer is adapted to different platforms through an adapter layer (adapters), including HarmonyOS, WeChat mini program, uniapp, etc., truly achieving "one core, multiple ends reuse".

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Chart Example

The following is a partial rendering effect of some chart types on the HarmonyOS platform:

• Bar Chart

  
  

   

• Area Chart

  
  

   

• Mountain Chart

  
  

• Scatter Chart

  

• Bubble Chart

  

• Pie Chart

  

• Rose Chart

  

• Radar Chart

  

• Word Cloud Chart
  
  

• Progress Bar

  
  

• Dashboard

  
  

• Funnel Chart

  
  

• K Line Chart

  

(More types and styles can be referred to the docs directory)

4. Feature Overview

Features

• Cross-platform
  Supports mainstream platforms such as HarmonyOS, WeChat mini program, and uniapp
• Modular design
  Decoupling of underlying rendering and platform adaptation, easy to extend and maintain
• ️ Full support for TypeScript: Type safety, excellent development experience
• Rich chart types
  Bar chart, column chart, line chart, area chart, mountain chart, etc.
• ⚡ High-performance rendering: Underlying optimization, smooth animation
• Easy to Extend
  Support for custom chart types and platform adaptation
• Customizable styles
  Support for theme customization

Supported chart types

• Bar Chart (column)
• Column Chart (bar)
• Line Chart (line)
• Area Chart (area)
• Mountain Chart (mount)
• Scatter Chart (scatter)
• Bubble Chart (bubble)
• Mixed Chart (mix)
• Pie Chart (pie)
• Ring Chart (ring)
• Rose Chart (rose)
• Radar Chart (radar)
• Word Cloud Chart (word)
• Arcbar Chart (arcbar)
• Gauge Dashboard (gauge)
• Funnel Chart (funnel)
• Candlestick Chart (candle)
• Map (map)
• More types are being developed continuously...

5. Tech Stack

Download and Install

For HarmonyOS, please refer to the README.md file in the corresponding directory; for other platforms, you can download from GitHub

Quick Start

<!-- Native H5 -->
<html lang="zh-CN">
<head>
  ....
</head>
<body>
  <canvas id="chart" width="600px" height="400px"></canvas>
  ...
  <!-- Import the uCharts library built by build -->
  <script src="../adapters/dist/h5/ucharts-v3.min.js"></script>
  <script language="JavaScript">
    function createLineChart() {
      const canvas = document.getElementById('chart');
      const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
      const chart = new UCharts({
          type: "line",
          context: ctx,
          categories: ["2018","2019","2020","2021","2022","2023"],
          series: [
              {
                  name: Volume A,
                  data: [35,8,25,37,4,20]
              },
              {
                  name: Volume B,
                  data: [70,40,65,100,44,68]
              },
              {
                  name: Volume C,
                  data: [100,80,95,150,112,132]
              }
          ],
          padding: [15,10,0,15],
          xAxis: { disableGrid: true },
          yAxis: { gridType: "dash", dashLength: 2 },
          extra: {
            line: {
              type: "straight",
              width: 2,
              activeType: "hollow"
            }
          }
      });
    }
    // After the page is loaded, the line chart is displayed by default
    window.onload = function() {
      createLineChart();
    };
  </script>
</body>
</html>

For specific platform context acquisition methods, please refer to the corresponding adaptation layer documents.

Directory Structure

├── core/                # Chart Core Capability (Platform Independent)
│   ├── types/           # Type Definition
│   ├── utils/           # Tool Function
│   ├── chart/           # Various Chart Renderers
│   ├── event/           # Event System
│   ├── animation/       # Animation System
│   └── factory.ts       # Chart Factory
├── adapters/            # Platform Adaptation Layer
│   ├── harmony/         # HarmonyOS adaptation
│   ├── h5/              # Native H5 adaptation
│   ├── wechat/          # WeChat mini-program adaptation
│   └── uniapp/          # uniapp adaptation
├── interface/           # External unified interface
│   ├── CanvasContext.ts   # Cross-platform unified canvas context interface definition
├── examples/            # Sample code
├── docs/                # Documentation
└── README.md

Performance Optimization

• Low-level rendering optimization
  Implemented in TypeScript, facilitating multi-end compilation and optimization
• Animation and event separation
  Animation and event systems are independent, improving smoothness
• On-demand loading
  Only load the required chart types and adaptation layers

Compatibility

• HarmonyOS system
  Supports HarmonyOS 5.0 and above
• Browser
  Supports browser and other H5 runtime environments
• WeChat Mini-Program
  Supports mainstream mini-program platforms (under adaptation...)
• uniapp
  Supports mainstream uniapp runtime environments (under adaptation...)