Skip to charts
VEXARO CHARTS · SVG · NO DEPENDENCIES

Your data.
New perspectives.

10 responsive chart models. Configure with HTML or control through JavaScript, without external libraries.

Explore models JavaScript API

Get started

Load the Vexaro UI base, Charts CSS and a single Charts JavaScript entry. The global version exposes VexaroCharts; the ESM entry https://ui.vexaro.solutions/dist/vexaro-charts.js provides the same exports. Charts is optional and independent of the UI JavaScript.

<link rel="stylesheet" href="https://ui.vexaro.solutions/dist/vexaro.css">
<link rel="stylesheet" href="https://ui.vexaro.solutions/dist/vexaro-charts.css">
<script defer src="https://ui.vexaro.solutions/dist/vexaro-charts.global.js"></script>

Data: { labels: string[], datasets: [{ label: string, data: number[] }] }. Up to 100 categories and 8 series; values must be finite with an absolute value no greater than 1e12. Pie, donut, stacked and radar charts accept nonnegative values. Radar requires at least 3 categories. Scatter uses numeric labels as X coordinates; each series value is Y.

Columns, horizontal bars, pie and donut display the first visible series. Line, area, grouped, stacked, radar and scatter support multiple series. The table always shows all data, including hidden series. Hover an SVG mark to see its value or open the table to access it by keyboard.

10 models to explore

Edit values in the JSON editor, apply data, change the type or use “Simulate data”. The legend toggles series where available. Reset restores the initial type and values.

01 / line

Lines

Request trends over six periods.

Edit JSON data
Copy this model's HTML
<div id="chart-line" data-vx-chart data-vx-chart-type="line" data-vx-chart-title="Lines">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-line">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-line">Download SVG</button>
02 / area

Area

Volume over time with a filled area below the curve.

Edit JSON data
Copy this model's HTML
<div id="chart-area" data-vx-chart data-vx-chart-type="area" data-vx-chart-title="Area">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-area">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-area">Download SVG</button>
03 / bar

Columns

Compare values from one series by category.

Edit JSON data
Copy this model's HTML
<div id="chart-bar" data-vx-chart data-vx-chart-type="bar" data-vx-chart-title="Columns">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-bar">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-bar">Download SVG</button>
04 / horizontal

Horizontal bars

Consumption ranking by resource.

Edit JSON data
Copy this model's HTML
<div id="chart-horizontal" data-vx-chart data-vx-chart-type="horizontal" data-vx-chart-title="Horizontal bars">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-horizontal">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-horizontal">Download SVG</button>
05 / grouped

Grouped bars

Compare production and staging side by side.

Edit JSON data
Copy this model's HTML
<div id="chart-grouped" data-vx-chart data-vx-chart-type="grouped" data-vx-chart-title="Grouped bars">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-grouped">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-grouped">Download SVG</button>
06 / stacked

Stacked bars

Composition of the total by category.

Edit JSON data
Copy this model's HTML
<div id="chart-stacked" data-vx-chart data-vx-chart-type="stacked" data-vx-chart-title="Stacked bars">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-stacked">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-stacked">Download SVG</button>
07 / pie

Pie

Each category's share of the total.

Edit JSON data
Copy this model's HTML
<div id="chart-pie" data-vx-chart data-vx-chart-type="pie" data-vx-chart-title="Pie">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-pie">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-pie">Download SVG</button>
08 / donut

Donut

Value distribution with the total in the center.

Edit JSON data
Copy this model's HTML
<div id="chart-donut" data-vx-chart data-vx-chart-type="donut" data-vx-chart-title="Donut">
  <script type="application/json">{"labels": ["1", "2", "3", "4", "5", "6"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-donut">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-donut">Download SVG</button>
09 / scatter

Scatter

Relationship between numeric X and Y values.

Edit JSON data
Copy this model's HTML
<div id="chart-scatter" data-vx-chart data-vx-chart-type="scatter" data-vx-chart-title="Scatter">
  <script type="application/json">{"labels": ["1", "2", "4", "7", "9", "12"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-scatter">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-scatter">Download SVG</button>
10 / radar

Radar

Compare profiles across multiple dimensions.

Edit JSON data
Copy this model's HTML
<div id="chart-radar" data-vx-chart data-vx-chart-type="radar" data-vx-chart-title="Radar">
  <script type="application/json">{"labels": ["CPU", "Memory", "Disk", "Network", "API", "Cache"], "datasets": [{"label": "Production", "data": [42, 68, 54, 86, 72, 94]}, {"label": "Staging", "data": [28, 38, 44, 52, 48, 64]}]}</script>
</div>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="reset" data-vx-target="#chart-radar">Reset</button>
<button class="vx-btn vx-btn-secondary vx-btn-sm" type="button" data-vx-chart-action="download" data-vx-target="#chart-radar">Download SVG</button>

Control with JavaScript

const chart = VexaroCharts.getInstance('#chart-line');
chart.setData({
  labels: ['1', '2', '3'],
  datasets: [{ label: 'Production', data: [42, 68, 54] }]
});
chart.setType('area');
chart.toggleDataset(0); // The last visible series is preserved.
chart.reset();
const svg = chart.exportSVG();
// Events: vx:chart:change, vx:chart:toggle, vx:chart:error.
// For content inserted later: VexaroCharts.init(container).
// Before removing: VexaroCharts.destroy(container).

Use new VexaroCharts.Chart(element, { type, data }) for manual initialization on elements without data-vx-chart. Destroy manual instances with chart.destroy(); automatic instances with VexaroCharts.destroy(container). Do not create a second instance on the same element.

Declarative HTML controls

data-vx-chart-action="type" on a select changes the type on the change event. On buttons, use reset, download, toggle (with data-vx-dataset="0") or update (with data-vx-chart-source="#editor"). All require data-vx-target="#id-do-grafico". Invalid data preserves the previous chart and displays an error message.

Themes and colors

Charts follow the UI theme tokens. Customize --vx-chart-color-1 through --vx-chart-color-8. Legends, mark titles and the table complement the colors. SVG exports include the current theme's computed colors. There is no automatic animation.