/Chart-Customization-Blazor-Webinar

Demo from Charting / App Builder best practices webinar Sep 27 2022

Primary LanguageCSS

Chart Customization Blazor Webinar

Updated Sept 29th, 2022

Watch the Webinar on how to create charts, customize charts, etc.!

https://www.youtube.com/watch?v=OSEpmpHlC9c

Data sources use in this sample:

The BasicChart sample uses these property settings on the IgbCategoryChart

<div class="column-layout group">
    <IgbCategoryChart 
	DataSource="ordersByCountryOrdersByCountryAggregate" 
        ChartType="CategoryChartType.Line"
        Brushes="#79D7F2"
        MarkerAutomaticBehavior="MarkerAutomaticBehavior.Square"
        XAxisTitleTextStyle="Bold"
        YAxisTitleTextStyle="Bold"
        FinalValueAnnotationsVisible="true"        
        AutoMarginAndAngleUpdateMode="AutoMarginsAndAngleUpdateMode.SizeChanging"
        ShouldConsiderAutoRotationForInitialLabels="true"
        CrosshairsAnnotationEnabled="true"
        CrosshairsDisplayMode="CrosshairsDisplayMode.Both"
        CrosshairsSnapToData="true"
        InitialSorts="Orders asc"
        IsTransitionInEnabled="true"
        HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
        ChartTitle="Orders by Country" 
        XAxisTitle="Country" 
        YAxisTitle="Order Count" 
        SeriesPointerDown="SeriesClicked"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series" 
        class="category-chart" basic-chart-scope>        
    </IgbCategoryChart>

To trap the SeriesPointerDown:

    private void SeriesClicked(IgbDomainChartSeriesPointerEventArgs args){
        var x = (ChartCustomizationWebinar.OrdersByCountry.OrdersByCountryAggregateType)args.Item;
        header = x.Country;
        value = x.Orders.Value;
    }

The AggregateChart sample uses these property settings on the IgbCategoryChart

    <IgbCategoryChart 
        ChartTitle="Sales by Product"
        DataSource=salesByProductSales 
        IncludedProperties=@(new string[] { "CategoryName", "ProductSales" })
        InitialGroups="CategoryName"
        InitialSummaries="sum(ProductSales) as ProductSales"
        GroupSorts="ProductSales asc"
        IsTransitionInEnabled="true"
        TransitionInSpeedType="TransitionInSpeedType.Random"
        CrosshairsSnapToData="true"
        ChartType="CategoryChartType.Column"
        CrosshairsDisplayMode="CrosshairsDisplayMode.Both"
        IsCategoryHighlightingEnabled="true"
        HighlightingMode="SeriesHighlightingMode.FadeOthersSpecific"
        IsSeriesHighlightingEnabled="true"
        FinalValueAnnotationsVisible="true"
        AutoMarginAndAngleUpdateMode="AutoMarginsAndAngleUpdateMode.SizeChanging"
        ShouldConsiderAutoRotationForInitialLabels="true"
        class="category-chart" aggregate-chart-scope>
    </IgbCategoryChart>

Run in Visual Studio 2022

  • open the project in Visual Studio 2022

  • press Start (F5)

Run in VS Code

NOTE: Running the app requires .NET 6.0 to be installed.

Resources