[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Column Sparkline

The Ignite UI for Blazor Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for Blazor sparkline component. Refer to the Column Types topic for other types of columns supported in the IgbGrid component.

Blazor Column Sparkline Example

Code Snippet

The following code example shows how to embed IgbSparkline component in IgbTemplateColumn of the IgbGrid component :

<IgbDataGrid Height="100%" Width="100%"
          RowHeight="90"
          AutoGenerateColumns="false"
          DataSource="DataSource">
    <IgbTemplateColumn Field="OrderHistory" Width="@("*>180")" HeaderText="Order History" >
        <Template>
            <RenderFragment>
                 <div style="width: 100%; height: 70px; background: transparent">
                     <Sparkline Height="100%" Width="100%"
                                DataSource="@((context.RowItem as Product).OrderHistory)"
                                DisplayType="SparklineDisplayType.Line"
                                ValueMemberPath="Sold"
                                LabelMemberPath="Week"
                                Brush="rgb(21, 190, 6)">
                     </Sparkline>
                 </div>
            </RenderFragment>
        </Template>
    </IgbTemplateColumn>
</IgbDataGrid>

API References

• IgbGrid
• IgbSparkline