Docs › Frameworks and server

Web component <chart-82>

One HTML tag, no framework.

The CDN scripts (82chart.min.js, 82chart.esm.js) register <chart-82> on their own; with the npm package call defineChartElement() once. Server templates (PHP, JSP, Django) only need to print JSON.

<chart-82
  type="bar"
  title="Monthly sales"
  height="280"
  data='{"labels":["Jan","Feb","Mar"],"series":[{"name":"Sales","data":[32000,41000,38500]}]}'
></chart-82>

import { defineChartElement } from '@82chart/core';
import '@82chart/core/styles.css';
defineChartElement();            // <chart-82>
// defineChartElement('my-chart'); // under another tag name

const el = document.querySelector('chart-82');
el.options = { zoom: true, annotations: { y: [{ value: 40000, label: 'Target' }] } }; // options as an object
el.chart.download('png');        // the chart instance inside

Attribute	What it takes
`type`, `theme`, `skin`	Strings
`data`	A JSON string (`{"labels": …, "series": …}`)
`options`	Other options as JSON; options that need functions go through the `el.options` property
`height`	A number or `auto`
`title`, `subtitle`, `eyebrow`, `footnote`, `unit`	Card header and unit
`value`, `delta`	Read as numbers when they look like numbers

Changing an attribute redraws the chart; removing the element cleans the chart up.