Radar Charts
Radar chart examples: dots, grids, lines, legend, icons and more.
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';Default
Trending up by 5.2% this month
January - June 2024
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-radar-default',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
</svg>
<iv-chart-tooltip [cursor]="false" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarDefault {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 273 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Dots
Trending up by 5.2% this month
January - June 2024
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-radar-dots',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center">
<iv-card-title>Radar Chart - Dots</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" dot />
</svg>
<iv-chart-tooltip [cursor]="false" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarDots {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 273 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Lines Only
Trending up by 5.2% this month
January - June 2024
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-radar-lines-only',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Lines Only</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid [radialLines]="false" />
<g
ivRadar
dataKey="desktop"
[fillOpacity]="0"
stroke="var(--color-desktop)"
[strokeWidth]="2"
/>
<g
ivRadar
dataKey="mobile"
[fillOpacity]="0"
stroke="var(--color-mobile)"
[strokeWidth]="2"
/>
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarLinesOnly {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 160 },
{ month: 'February', desktop: 185, mobile: 170 },
{ month: 'March', desktop: 207, mobile: 180 },
{ month: 'April', desktop: 173, mobile: 160 },
{ month: 'May', desktop: 160, mobile: 190 },
{ month: 'June', desktop: 174, mobile: 204 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Custom Label
Trending up by 5.2% this month
January - June 2024
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-radar-label-custom',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Custom Label</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data" [margin]="{ top: 10, right: 10, bottom: 10, left: 10 }">
<g ivPolarAngleAxis dataKey="month" [tick]="tick" />
<ng-template #tick let-t>
<svg:text
[attr.x]="t.x"
[attr.y]="t.y + (t.index === 0 ? -10 : 0)"
[attr.text-anchor]="t.textAnchor"
font-size="13"
font-weight="500"
>
<svg:tspan>{{ data[t.index].desktop }}</svg:tspan>
<svg:tspan class="fill-muted-foreground">/</svg:tspan>
<svg:tspan>{{ data[t.index].mobile }}</svg:tspan>
<svg:tspan [attr.x]="t.x" dy="1rem" font-size="12" class="fill-muted-foreground">
{{ data[t.index].month }}
</svg:tspan>
</svg:text>
</ng-template>
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
<g ivRadar dataKey="mobile" />
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarLabelCustom {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Radius Axis
Trending up by 5.2% this month
January - June 2024
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-radar-radius',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Radius Axis</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
<g ivRadar dataKey="mobile" />
<g
ivPolarRadiusAxis
[angle]="60"
tick
stroke="var(--foreground)"
orientation="middle"
/>
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" labelKey="month" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarRadius {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid Custom
Trending up by 5.2% this month
January - June 2024
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-radar-grid-custom',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid Custom</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid [radialLines]="false" [polarRadius]="[90]" />
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridCustom {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 273 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid None
Trending up by 5.2% this month
January - June 2024
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-radar-grid-none',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid None</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" dot />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridNone {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 273 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid Circle
Trending up by 5.2% this month
January - June 2024
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-radar-grid-circle',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid Circle</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid gridType="circle" />
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" dot />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridCircle {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 273 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid Circle - No lines
Trending up by 5.2% this month
January - June 2024
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-radar-grid-circle-no-lines',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid Circle - No lines</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid gridType="circle" [radialLines]="false" />
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" dot />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridCircleNoLines {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 203 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid Circle Filled
Trending up by 5.2% this month
January - June 2024
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-radar-grid-circle-fill',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid Circle Filled</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid class="fill-(--color-desktop) opacity-20" gridType="circle" />
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.5" />
</svg>
<iv-chart-tooltip [cursor]="false" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridCircleFill {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 285 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 203 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 264 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Grid Filled
Trending up by 5.2% this month
January - June 2024
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-radar-grid-fill',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Grid Filled</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarGrid class="fill-(--color-desktop) opacity-20" />
<g ivPolarAngleAxis dataKey="month" />
<g ivRadar dataKey="desktop" [fillOpacity]="0.5" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarGridFill {
protected readonly data = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 285 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 203 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 264 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Multiple
Trending up by 5.2% this month
January - June 2024
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-radar-multiple',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Multiple</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content class="pb-0">
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
<g ivRadar dataKey="mobile" />
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" />
</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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarMultiple {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Legend
Desktop
Mobile
Trending up by 5.2% this month
January - June 2024
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-radar-legend',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Legend</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content>
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data" [margin]="{ top: -40, bottom: -10, left: 0, right: 0 }">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
<g ivRadar dataKey="mobile" />
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" />
<iv-chart-legend class="mt-8" />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 pt-4 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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarLegend {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
protected readonly trendingUp = lucideTrendingUp;
}
Icons
Trending up by 5.2% this month
January - June 2024
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { lucideArrowDownFromLine, lucideArrowUpFromLine, lucideTrendingUp } from '@ng-icons/lucide';
import { IV_CARD_IMPORTS } from '@inlaylab/ivorie/card';
import { IV_CHART_IMPORTS, IvChartConfig } from '@inlaylab/ivorie/chart';
/** Config icons: any component. These wrap an ng-icon. */
@Component({
selector: 'demo-arrow-down-from-line-icon',
imports: [NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'flex text-muted-foreground' },
template: `<ng-icon [svg]="icon" />`,
})
class ArrowDownFromLineIcon {
protected readonly icon = lucideArrowDownFromLine;
}
@Component({
selector: 'demo-arrow-up-from-line-icon',
imports: [NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'flex text-muted-foreground' },
template: `<ng-icon [svg]="icon" />`,
})
class ArrowUpFromLineIcon {
protected readonly icon = lucideArrowUpFromLine;
}
@Component({
selector: 'demo-chart-radar-icons',
imports: [IV_CARD_IMPORTS, IV_CHART_IMPORTS, NgIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<iv-card class="w-full max-w-md">
<iv-card-header class="items-center pb-4">
<iv-card-title>Radar Chart - Icons</iv-card-title>
<iv-card-description>Showing total visitors for the last 6 months</iv-card-description>
</iv-card-header>
<iv-card-content>
<iv-chart [config]="config" class="mx-auto aspect-square max-h-[250px]">
<svg ivRadarChart [data]="data" [margin]="{ top: -40, bottom: -10, left: 0, right: 0 }">
<g ivPolarAngleAxis dataKey="month" />
<g ivPolarGrid />
<g ivRadar dataKey="desktop" [fillOpacity]="0.6" />
<g ivRadar dataKey="mobile" />
</svg>
<iv-chart-tooltip [cursor]="false" indicator="line" />
<iv-chart-legend class="mt-8" />
</iv-chart>
</iv-card-content>
<iv-card-footer class="flex-col gap-2 pt-4 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 flex items-center gap-2 leading-none">
January - June 2024
</div>
</iv-card-footer>
</iv-card>
`,
})
export default class ChartRadarIcons {
protected readonly data = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
];
protected readonly config: IvChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)', icon: ArrowDownFromLineIcon },
mobile: { label: 'Mobile', color: 'var(--chart-2)', icon: ArrowUpFromLineIcon },
};
protected readonly trendingUp = lucideTrendingUp;
}