RadarChartDocumentation.razor

@attribute [Route(pageUrl)]
@layout DemosMainLayout

<DemosPageHeadSection PageUrl="@pageUrl"
                      PageTitle="@pageTitle"
                      PageDescription="@pageDescription"
                      MetaTitle="@metaTitle"
                      MetaDescription="@metaDescription"
                      ImageUrl="@imageUrl" />

<DocsLink Href="@DemoRouteConstants.Docs_URL_RadarChart" />

<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
    <div class="mb-3">
        Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
    </div>
</Section>

<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
    <div class="mb-3">
        In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
    </div>
    <Callout Heading="TIP" Color="CalloutColor.Success">
        For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
        These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
    </Callout>
    <Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
</Section>

<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
    <Demo Type="typeof(RadarChart_Demo_02_Click_Event)" Tabs="true" />
</Section>

<ChartJSCallout />

@code {
    private const string pageUrl = DemoRouteConstants.Demos_URL_RadarChart;
    private const string pageTitle = "Blazor Radar Chart";
    private const string pageDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
    private const string metaTitle = "Blazor Radar Chart Component";
    private const string metaDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
    private const string imageUrl = "https://i.imgur.com/Urrb79M.png";
}