Phi / Custom Chart

Custom Chart

<Chart :echarts="echarts" :options="options" :height="400" />

Installation

Chart requires ECharts with the renderer and chart modules registered by the consumer.

pnpm add echarts

Imports

import { Chart, type PhiChartOption } from "@dicehub/phi/components/chart";

Usage

<script setup lang="ts">
import { Chart, type PhiChartOption } from "@dicehub/phi/components/chart";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([CanvasRenderer, PieChart, TooltipComponent]);

const options: PhiChartOption = {
  animation: true,
  animationDuration: 2000,
  tooltip: { show: true },
  series: [
    {
      type: "pie",
      data: [
        { value: 101, name: "Series A" },
        { value: 202, name: "Series B" },
        { value: 303, name: "Series C" },
        { value: 404, name: "Series D" },
        { value: 505, name: "Series E" },
      ],
    },
  ],
};
</script>

<template>
  <Chart :echarts="echarts" :options="options" :height="400" />
</template>

Examples

Use dangerousHtmlFormatter when a tooltip needs trusted HTML content. Escape dynamic values before returning markup.

<script setup lang="ts">
import { Chart, type PhiChartOption } from "@dicehub/phi/components/chart";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([CanvasRenderer, PieChart, TooltipComponent]);

const options: PhiChartOption = {
  tooltip: {
    trigger: "item",
    dangerousHtmlFormatter(params) {
      const item = params as { name?: unknown; value?: unknown; percent?: unknown };
      const rawPercent = Number(item.percent ?? 0);
      const percent = Number.isFinite(rawPercent) ? Math.round(rawPercent) : 0;
      const safeName = echarts.format.encodeHTML(String(item.name ?? ""));
      const safeValue = echarts.format.encodeHTML(String(item.value ?? ""));
      const safePercent = echarts.format.encodeHTML(String(percent));

      return `
        <div style="padding: 8px;">
          <div style="font-weight: 600; margin-bottom: 4px;">${safeName}</div>
          <div>Value: <strong>${safeValue}</strong></div>
          <div style="font-size: 12px; opacity: 0.7; margin-top: 4px;">
            ${safePercent}% of total
          </div>
        </div>
      `;
    },
  },
  series: [
    {
      type: "pie",
      data: [
        { value: 101, name: "Series A" },
        { value: 202, name: "Series B" },
        { value: 150, name: "<img src=x onerror=alert('XSS')>" },
        { value: 303, name: "Series C" },
        { value: 404, name: "Series D" },
      ],
    },
  ],
};
</script>

<template>
  <Chart :echarts="echarts" :options="options" :height="400" />
</template>

API Reference

Prop	Type	Default	Description
`echarts`	`typeof echarts`	`-`	ECharts core instance with the required modules registered.
`options`	`PhiChartOption`	`-`	ECharts option object passed through to setOption.
`optionUpdateBehavior`	`SetOptionOpts`	`-`	Additional options passed to chart.setOption.
`className`	`string`	`-`	Optional class passed to the chart element.
`aspectRatio`	`number \| string`	`-`	Responsive container ratio used when height is not set.
`height`	`number`	`350`	Chart container height in pixels.
`isDarkMode`	`boolean`	`false`	Initializes ECharts with dark mode and dark chart colors.
`onEvents`	`Partial<ChartEvents>`	`-`	Event handlers registered on the ECharts instance.