Installation
Supported Environments
OrbCharts supports CDN download and npm installation, using the ESM modular standard. It is not limited to specific frontend frameworks and supports both Javascript and Typescript development environments.
Using in Frontend Frameworks
OrbCharts draws charts directly on DOM elements as SVG graphics, without relying on specific frontend framework technologies. Therefore, theoretically, OrbCharts can be used in all mainstream frontend frameworks (e.g., React, Vue, Angular).
WARNING
Note that since virtual DOM rendering technology is not currently supported, OrbCharts modules must be executed on the client-side (browser). When using frontend frameworks with SSR (Server-Side Render) technology, ensure that OrbCharts modules are introduced and called on the client-side, not the server-side.
In some cases, such errors may not be discovered in local development mode (program interruption and error reporting) but may occur after packaging the program when server-side rendering errors occur.
npm Installation
Use the following command to install all OrbCharts modules into your project:
npm i orbcharts
Example - Using in Nuxt Framework
Nuxt is an SSR framework based on Vue, so DOM-related operations must be performed in the onMounted lifecycle (client-side), and OrbCharts objects must be referenced and called on the client-side.
<template>
<div id="chart"></div>
</template>
<script setup>
import { SeriesChart, Pie, PRESET_PIE_BASIC } from 'orbcharts'
const props = defineProps({ data: Array })
const chart = ref()
// client-side
onMounted(() => {
const element = document.querySelector('#chart')
chart.value = new SeriesChart(element, {
preset: PRESET_PIE_BASIC
})
chart.value.plugins$.next([new Pie()])
watch(() => props.data, () => {
chart.value.data$.next(props.data ?? [])
}, { immediate: true })
})
</script>
Using in Static Web Pages
Currently, OrbCharts provides both ESM and UMD module standards, which can be chosen according to your needs.
CDN Download
It is recommended to use the jsdelivr CDN service.
ESM format syntax:
<script type="module">
import * as orbcharts from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.0/+esm'
</script>
UMD format syntax:
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>
Example - Using in HTML Web Page (ESM) Format
<html>
<head>
<title>Demo ESM</title>
</head>
<body>
<div id="chart"></div>
<script type="module">
import { SeriesChart, PRESET_PIE_BASIC, Pie } from 'https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/+esm'
const element = document.querySelector('#chart')
const chart = new SeriesChart(element, {
preset: PRESET_PIE_BASIC
})
chart.plugins$.next([new Pie()])
chart.data$.next([
[80,120,45],
[50,30,15,28],
[55,13,38,10,5]
])
</script>
</body>
</html>
Example - Using in HTML Web Page (UMD) Format
<html>
<head>
<title>Demo UMD</title>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/orbcharts@3.0.8/dist/orbcharts.umd.min.js"></script>
<script>
const element = document.querySelector('#chart')
const chart = new orbcharts.SeriesChart(element, {
preset: orbcharts.PRESET_PIE_BASIC
})
chart.plugins$.next([new orbcharts.Pie()])
chart.data$.next([
[80,120,45],
[50,30,15,28],
[55,13,38,10,5]
])
</script>
</body>
</html>