Guide

Quick Start

Installation

OrbCharts supports CDN download and npm installation, using the ESM modular standard. It is not limited to specific front-end frameworks and supports both JavaScript and TypeScript development environments.

Here are several installation methods:

  1. npm installation
npm i orbcharts
  1. ESM format CDN download
<script type="module">
import * as orbcharts from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/+esm'
</script>
  1. UMD format CDN download
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>

Execution

This is an executable program to start creating your first pie chart:

import { SeriesChart, Pie } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

You can also try it on the demo page.

Reading Guide

OrbCharts is designed as an out-of-the-box package, providing many preset parameters for quick setup (also known as "Preset"). It also offers a large number of APIs for more detailed settings, giving advanced users greater customization flexibility.

The chapters in this document are arranged from shallow to deep, from abstract to implementation details. You can read them in order, or jump to the sections you need. Here is an outline of the contents of each chapter, so you can choose what to read based on your needs:

[Basic Concepts]

From the basic design logic of OrbCharts to the introduction of core technologies. This chapter is the foundation for understanding OrbCharts in depth and is the first chapter to read sequentially. However, this chapter does not directly mention programming implementation methods. For users who want to focus quickly, we recommend skipping this chapter first and coming back to it later if needed.

[Get Started!]

If you are using it for the first time and want to quickly create an executable program, we recommend reading all the content in this chapter. You can quickly learn how to install it in your project and get executable program examples.

[Basic Usage]

This chapter focuses on the syntax needed to create the most basic charts and the "necessary" API introductions. We recommend reading all the content in this chapter if possible. The "Data Labels" section introduces six types of data classifications, and you can choose to read based on the chart types you use.

[Chart API]

Detailed specifications of all APIs for chart objects, which can be consulted as needed:

  • plugins$ API required to create plugins
  • data$ API required to create data
  • chartParams$ Common parameters applied to all plugins for style adjustments (e.g., spacing, color, font size, etc.) and interaction methods (e.g., highlight targets, etc.)
  • dataFormatter$ Classified into six data formats, each with its characteristics and adjustable parameters to modify the chart presentation (e.g., data sorting methods, continuous data mapping methods and labels, axis labels, and examples, etc.)
  • event$ Subscribe to events to obtain data formats on corresponding chart elements
  • destroy() Recycle chart

[Plugins]

API for all plugin parameters. Using presets already meets most parameter adjustment needs, but there are still many situations where manual adjustments may be required. You can consult as needed.

About Us

OrbCharts is an organic and continuously developing and improving project. If you are interested in participating in this project, please visit Github to get the source code. You can fork it in your preferred way or open an issue to tell us what needs improvement.

Oh, and this is our logo:

  • Light Mode

logo - light mode

  • Dark Mode

logo - dark mode

License

OrbCharts is released under the Apache License 2.0.