Radial Charts
Radial chart examples: grid, labels, center text, shape and stacked.
Each example is an iv-card with a chart inside. Copy the code under it. See Chart for the parts and the API.
import { IV_CHART_IMPORTS } from '@inlaylab/ivorie/chart';Simple
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-simple',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex-1 pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadialChart [data]="data" [innerRadius]="30" [outerRadius]="110">
<g ivRadialBar dataKey="visitors" background />
</svg>
<iv-chart-tooltip [cursor]="false" hideLabel nameKey="browser" />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialSimple {
protected readonly data = [
{ browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
{ browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
{ browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
{ browser: 'other', visitors: 90, fill: 'var(--color-other)' },
];
protected readonly config: IvChartConfig = {
visitors: { label: 'Visitors' },
chrome: { label: 'Chrome', color: 'var(--chart-1)' },
safari: { label: 'Safari', color: 'var(--chart-2)' },
firefox: { label: 'Firefox', color: 'var(--chart-3)' },
edge: { label: 'Edge', color: 'var(--chart-4)' },
other: { label: 'Other', color: 'var(--chart-5)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Label
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-label',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart - Label</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex-1 pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg
ivRadialChart
[data]="data"
[startAngle]="-90"
[endAngle]="380"
[innerRadius]="30"
[outerRadius]="110"
>
<g ivRadialBar dataKey="visitors" background>
<g
ivLabelList
position="insideStart"
dataKey="browser"
class="fill-white text-[11px] capitalize mix-blend-luminosity"
/>
</g>
</svg>
<iv-chart-tooltip [cursor]="false" hideLabel nameKey="browser" />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialLabel {
protected readonly data = [
{ browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
{ browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
{ browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
{ browser: 'other', visitors: 90, fill: 'var(--color-other)' },
];
protected readonly config: IvChartConfig = {
visitors: { label: 'Visitors' },
chrome: { label: 'Chrome', color: 'var(--chart-1)' },
safari: { label: 'Safari', color: 'var(--chart-2)' },
firefox: { label: 'Firefox', color: 'var(--chart-3)' },
edge: { label: 'Edge', color: 'var(--chart-4)' },
other: { label: 'Other', color: 'var(--chart-5)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-grid',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart - Grid</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex-1 pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadialChart [data]="data" [innerRadius]="30" [outerRadius]="100">
<g ivPolarGrid gridType="circle" />
<g ivRadialBar dataKey="visitors" />
</svg>
<iv-chart-tooltip [cursor]="false" hideLabel nameKey="browser" />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialGrid {
protected readonly data = [
{ browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
{ browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
{ browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
{ browser: 'other', visitors: 90, fill: 'var(--color-other)' },
];
protected readonly config: IvChartConfig = {
visitors: { label: 'Visitors' },
chrome: { label: 'Chrome', color: 'var(--chart-1)' },
safari: { label: 'Safari', color: 'var(--chart-2)' },
firefox: { label: 'Firefox', color: 'var(--chart-3)' },
edge: { label: 'Edge', color: 'var(--chart-4)' },
other: { label: 'Other', color: 'var(--chart-5)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Text
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-text',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart - Text</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex-1 pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg
ivRadialChart
[data]="data"
[startAngle]="0"
[endAngle]="250"
[outerRadius]="90"
[innerRadius]="80"
>
<g
ivPolarGrid
gridType="circle"
[radialLines]="false"
stroke="none"
class="first:fill-muted last:fill-background"
[polarRadius]="[90, 80]"
/>
<g ivRadialBar dataKey="visitors" background [cornerRadius]="10" />
<g ivPolarRadiusAxis>
<ng-template ivChartLabel let-cx="cx" let-cy="cy">
<svg:text
[attr.x]="cx"
[attr.y]="cy"
text-anchor="middle"
dominant-baseline="middle"
>
<svg:tspan [attr.x]="cx" [attr.y]="cy" class="fill-foreground text-4xl font-bold">
{{ data[0].visitors.toLocaleString() }}
</svg:tspan>
<svg:tspan [attr.x]="cx" [attr.y]="cy + 24" class="fill-muted-foreground">
Visitors
</svg:tspan>
</svg:text>
</ng-template>
</g>
</svg>
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialText {
protected readonly data = [{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' }];
protected readonly config: IvChartConfig = {
visitors: { label: 'Visitors' },
safari: { label: 'Safari', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Shape
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-shape',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart - Shape</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex-1 pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadialChart [data]="data" [endAngle]="100" [innerRadius]="65" [outerRadius]="95">
<g
ivPolarGrid
gridType="circle"
[radialLines]="false"
stroke="none"
class="first:fill-muted last:fill-background"
[polarRadius]="[86, 74]"
/>
<g ivRadialBar dataKey="visitors" background />
<g ivPolarRadiusAxis>
<ng-template ivChartLabel let-cx="cx" let-cy="cy">
<svg:text
[attr.x]="cx"
[attr.y]="cy"
text-anchor="middle"
dominant-baseline="middle"
>
<svg:tspan [attr.x]="cx" [attr.y]="cy" class="fill-foreground text-4xl font-bold">
{{ data[0].visitors.toLocaleString() }}
</svg:tspan>
<svg:tspan [attr.x]="cx" [attr.y]="cy + 24" class="fill-muted-foreground">
Visitors
</svg:tspan>
</svg:text>
</ng-template>
</g>
</svg>
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialShape {
protected readonly data = [{ browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' }];
protected readonly config: IvChartConfig = {
visitors: { label: 'Visitors' },
safari: { label: 'Safari', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Stacked
Trending up by 5.2% this month
Showing total visitors for the last 6 months
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
@Component({
selector: 'demo-chart-radial-stacked',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md flex flex-col">
<iv-card-header class="items-center pb-0">
<iv-card-title>Radial Chart - Stacked</iv-card-title>
<iv-card-description>January - June 2024</iv-card-description>
</iv-card-header>
<iv-card-content class="flex flex-1 items-center pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square w-full max-w-[250px]">
<svg ivRadialChart [data]="data" [endAngle]="180" [innerRadius]="80" [outerRadius]="110">
<g
ivRadialBar
dataKey="mobile"
fill="var(--color-mobile)"
stackId="a"
[cornerRadius]="5"
class="stroke-transparent stroke-2"
/>
<g
ivRadialBar
dataKey="desktop"
stackId="a"
[cornerRadius]="5"
fill="var(--color-desktop)"
class="stroke-transparent stroke-2"
/>
<g ivPolarRadiusAxis>
<ng-template ivChartLabel let-cx="cx" let-cy="cy">
<svg:text [attr.x]="cx" [attr.y]="cy" text-anchor="middle">
<svg:tspan
[attr.x]="cx"
[attr.y]="cy - 16"
class="fill-foreground text-2xl font-bold"
>
{{ total.toLocaleString() }}
</svg:tspan>
<svg:tspan [attr.x]="cx" [attr.y]="cy + 4" class="fill-muted-foreground">
Visitors
</svg:tspan>
</svg:text>
</ng-template>
</g>
</svg>
<iv-chart-tooltip [cursor]="false" hideLabel />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 text-sm">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <ng-icon [svg]="trendingUp" size="16" />
</div>
<div class="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadialStacked {
protected readonly data = [{ month: 'january', desktop: 1260, mobile: 570 }];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
protected readonly total = this.data[0].desktop + this.data[0].mobile;
}