Chart

Themed frame for any [Unovis](https://unovis.dev) chart

The frame around a chart from your charting library — title, description, legend, footer — in the system's type and series colours. The plot itself is yours.

Basic

Viewsper episode, two seasons

• Season 1
• Season 2

<script setup lang="ts">
import { BlessChart } from "blessing-ui";
import { VisAxis, VisCrosshair, VisLine, VisTooltip, VisXYContainer } from "@unovis/vue";
type Pt = { x: number; a: number; b: number };
const data: Pt[] = Array.from({ length: 12 }, (_, i) => ({
  x: i + 1,
  a: Math.round(40 + 30 * Math.sin(i / 2) + i * 2),
  b: Math.round(30 + 20 * Math.cos(i / 3) + i),
}));
const x = (d: Pt) => d.x;
const y = [(d: Pt) => d.a, (d: Pt) => d.b];
</script>

<template>
  <BlessChart
    title="Views"
    description="per episode, two seasons"
    :legend="['Season 1', 'Season 2']"
    style="max-width: 560px"
  >
    <VisXYContainer :data :margin="{ top: 8, right: 8 }">
      <VisLine :x :y :lineWidth="1.5" />
      <VisAxis type="x" :tickFormat="(v: number) => `第${v}話`" :gridLine="false" />
      <VisAxis type="y" :numTicks="4" />
      <VisCrosshair :template="(d: Pt) => `#${d.x}: ${d.a} / ${d.b}`" />
      <VisTooltip />
    </VisXYContainer>
  </BlessChart>
</template>

Bars

Sales

• BD
• DVD

<script setup lang="ts">
import { BlessChart } from "blessing-ui";
import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
type Pt = { x: number; a: number; b: number };
const data: Pt[] = [
  { x: 1, a: 40, b: 50 },
  { x: 2, a: 55, b: 49 },
  { x: 3, a: 68, b: 48 },
  { x: 4, a: 76, b: 44 },
  { x: 5, a: 75, b: 38 },
  { x: 6, a: 66, b: 33 },
];
</script>

<template>
  <BlessChart title="Sales" :legend="['BD', 'DVD']" height="200px" style="max-width: 560px">
    <VisXYContainer :data>
      <VisGroupedBar :x="(d: Pt) => d.x" :y="[(d: Pt) => d.a, (d: Pt) => d.b]" :barPadding="0.3" />
      <VisAxis type="x" :gridLine="false" />
      <VisAxis type="y" :numTicks="3" />
    </VisXYContainer>
  </BlessChart>
</template>

• It is a figure captioned by title and description. Say the chart's point in the description ("Views doubled after episode 3"), and give the numbers somewhere as text or a Table: a picture of data can't be read aloud.
• legend lists series in --bless-color-chart-1..5 order; those colours are at least 3:1 on the background in both themes.

Usage

import { BlessChart } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
description	string	—
height	string	"240px"
legend	string[]	—	series names for the built-in legend, in palette order

Slots

Name	Scope	Description
header	—
default	—
legend	—
footer	—