Class SfChartWizard

SfChartWizard is a user-friendly interface that guides users through the process of creating and customizing charts step-by-step. It simplifies chart creation by offering options for chart types, data selection, and formatting in an organized sequence.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
SfChartWizard
Implements
Inherited Members
Namespace: Syncfusion.Blazor.ChartWizard
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfChartWizard : SfDataBoundComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

The Chart Wizard component provides a comprehensive dialog-based interface for interactive chart creation. It encapsulates various internal components such as the chart area, side panel, and header, managing their lifecycle and interactions. This component serves as the public entry point for integrating the Chart Wizard functionality into Blazor applications.

Examples
<SfChartWizard Target="#container" Width="80%" Height="500px" HeaderTitle="My Custom Chart">
    <ChartSettings EnablePropertyPanel="true" AllowExport="true" ChartType="ChartType.Column">
        <ChartWizardChartDataPanelSettings CategoryFields="@(new List<string> { "Month" })" DataSource="@SalesData" />
        <ChartWizardChartSeriesCollection>
            <ChartWizardChartSeries Name="Sales" Fill="red" />
            <ChartWizardChartSeries Name="Profit" Fill="green" />
        </ChartWizardChartSeriesCollection>
    </ChartSettings>
</SfChartWizard>

@code {
    public class SaleData
    {
        public string Month { get; set; }
        public double Sales { get; set; }
        public double Profit { get; set; }
    }
    private List<SaleData> SalesData = new List<SaleData>
    {
        new SaleData { Month = "Jan", Sales = 100, Profit = 20 },
        new SaleData { Month = "Feb", Sales = 120, Profit = 25 }
    };
}
<SfChartWizard Target="#container" Width="80%" Height="500px" HeaderTitle="My Custom Chart">
    <ChartSettings EnablePropertyPanel="true" AllowExport="true" ChartType="ChartType.Column">
        <ChartWizardChartDataPanelSettings CategoryFields="@(new List<string> { "Month" })" DataSource="@SalesData" />
        <ChartWizardChartSeriesCollection>
            <ChartWizardChartSeries Name="Sales" Fill="red" />
            <ChartWizardChartSeries Name="Profit" Fill="green" />
        </ChartWizardChartSeriesCollection>
    </ChartSettings>
</SfChartWizard>

@code {
    public class SaleData
    {
        public string Month { get; set; }
        public double Sales { get; set; }
        public double Profit { get; set; }
    }
    private List<SaleData> SalesData = new List<SaleData>
    {
        new SaleData { Month = "Jan", Sales = 100, Profit = 20 },
        new SaleData { Month = "Feb", Sales = 120, Profit = 25 }
    };
}

Constructors

SfChartWizard()

Declaration
public SfChartWizard()

Properties

ChildContent

Gets or sets the content of the UI element.

Declaration
[Parameter]
public RenderFragment? ChildContent { get; set; }
Property Value
Type Description
RenderFragment

A RenderFragment representing the child content. The default value is null.
Remarks

This property is typically used to define nested configuration components like Syncfusion.Blazor.ChartWizard.SfChartWizard.ChartSettings.

EnableRtl

Gets or sets a value indicating whether right-to-left (RTL) rendering is enabled in the Chart Wizard component.

Declaration
[Parameter]
public bool EnableRtl { get; set; }
Property Value
Type Description
bool

A bool value. Set to true to enable RTL layout; otherwise, false. The default value is false.
Remarks

Enabling RTL layout is useful for supporting right-to-left languages such as Arabic, Hebrew, or Persian. It affects the alignment and flow direction of the component's content.

Examples
<SfChartWizard EnableRtl="true" />

Exporting

Gets or sets an EventCallback<TValue> that fires when the chart export action is initiated in the SfChartWizard component.

Declaration
[Parameter]
public EventCallback<ChartExportingEventArgs> Exporting { get; set; }
Property Value
Type Description
EventCallback<ChartExportingEventArgs>

An EventCallback<TValue> where the generic type argument is ChartExportingEventArgs. This callback allows for custom handling of the export process. No default value.
Remarks

This event is raised just before the chart content is exported, providing an opportunity to intervene in the process. You can use the event arguments (ChartExportingEventArgs) to:

  • Modify export parameters: Adjust properties like file name or resolution before the export proceeds.
  • Cancel the export: Set the Cancel property to true to prevent the export from occurring.
  • Perform pre-export logic: Execute custom actions or validations before the export process begins.
Examples
<SfChartWizard>
    <ChartWizardEvents Exporting="HandleExportingEvent" />
</SfChartWizard>

@code {
    private void HandleExportingEvent(ChartExportingEventArgs args)
    {
        Console.WriteLine($"Exporting initiated. Current file type: {args.ExportType}");

        // Example: Cancel export if a certain condition is met
        if (args.FileName == "untitled")
        {
            args.Cancel = true;
            Console.WriteLine("Export cancelled: File name 'untitled' is not allowed.");
        }
    }
}

Height

Gets or sets the height of the SfChartWizard component.

Declaration
[Parameter]
public string Height { get; set; }
Property Value
Type Description
string

A string value representing the height (e.g., "600px", "75%"). The default value is "100%".
Remarks

This property allows you to control the vertical dimension of the Chart Wizard component. Accepts input as either pixel ("600px") or percentage ("100%"). If specified as "100%", the chart wizard renders to the full height of its parent element.

Examples
<SfChartWizard Height="400px" />

PropertyPanelExpanded

Gets or sets a value indicating whether to display the property panel on initial rendering of the SfChartWizard component.

Declaration
[Parameter]
public bool PropertyPanelExpanded { get; set; }
Property Value
Type Description
bool

A bool value. If true, the property panel is displayed; otherwise, it is toggled off. The default value is true.
Remarks

The property panel serves as an interactive configurator within the Chart Wizard component. Users can utilize this panel to dynamically configure and customize various chart settings, such as fundamental chart types (series), data axes, legend appearance, and fine-tuning of data labels. It provides a user-friendly interface for real-time adjustments and preview of the chart's visual representation and data presentation.

Examples

The following example demonstrates how to initially display the property panel in the Chart Wizard.

<SfChartWizard PropertyPanelExpanded="true" />

Theme

Gets or sets the theme styles for the components within the SfChartWizard component.

Declaration
[Parameter]
public Theme Theme { get; set; }
Property Value
Type Description
Theme

The Theme specifying the visual style of the Chart Wizard. The default value is Fluent2.
Remarks

This property applies a consistent visual theme across all sub-components of the Chart Wizard. The available themes are:

  • Material - Renders the Syncfusion component with material theme.
  • Bootstrap - Renders the Syncfusion component with bootstrap theme.
  • HighContrastLight - Renders the Syncfusion component with high contrast light theme.
  • Fabric - Renders the Syncfusion component with fabric theme.
  • MaterialDark - Renders the Syncfusion component with material dark theme.
  • FabricDark - Renders the Syncfusion component with fabric dark theme.
  • HighContrast - Renders the Syncfusion component with high contrast theme.
  • BootstrapDark - Renders the Syncfusion component with bootstrap dark theme.
  • Bootstrap4 - Renders the Syncfusion component with bootstrap4 theme.
  • Bootstrap5 - Renders the Syncfusion component with bootstrap5 theme.
  • Bootstrap5Dark - Renders the Syncfusion component with bootstrap5Dark theme.
  • Tailwind - Renders the Syncfusion component with tailwind theme.
  • TailwindDark - Renders the Syncfusion component with tailwind dark theme.
  • Tailwind3 - Renders the Syncfusion component with tailwind3 theme.
  • Tailwind3Dark - Renders the Syncfusion component with tailwind3Dark theme.
  • Fluent - Renders the Syncfusion component with fluent theme.
  • FluentDark - Renders the Syncfusion component with fluent dark theme.
  • Fluent2 - Renders the Syncfusion component with fluent2 theme.
  • Fluent2Dark - Renders the Syncfusion component with fluent2 dark theme.
  • Fluent2HighContrast - Renders the Syncfusion component with fluent2 high contrast theme.
  • Material3 - Renders the Syncfusion component with material3 theme.
  • Material3Dark - Renders the Syncfusion component with material3Dark theme.
Examples
<SfChartWizard Theme="Theme.Bootstrap5" />

Width

Gets or sets the width of the SfChartWizard component.

Declaration
[Parameter]
public string Width { get; set; }
Property Value
Type Description
string

A string value representing the width (e.g., "800px", "50%"). The default value is "100%".
Remarks

This property allows you to control the horizontal dimension of the Chart Wizard component. Accepts input as either pixel ("800px") or percentage ("100%"). If specified as "100%", the chart wizard renders to the full width of its parent element.

Examples
<SfChartWizard Width="500px" />

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Dispose(bool)

Releases the unmanaged resources used by the component and optionally releases the managed resources.

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing

A value indicating whether to dispose managed resources.
Overrides

LoadChartAsync(string)

Asynchronously loads Chart configuration data from a JSON string and applies it to the current SfChartWizard instance.

Declaration
public Task LoadChartAsync(string data)
Parameters
Type Name Description
string data

A non-empty string containing the JSON representation of the Chart data. This parameter must not be null or empty.
Returns
Type Description
Task

A Task that represents the asynchronous operation. The task completes after the JSON payload has been successfully deserialized and the component state updated.
Remarks

This method performs asynchronous deserialization of Chart data and updates the internal state of the SfChartWizard component. All existing configuration values are overwritten by the data contained in the JSON payload.

If the provided JSON does not match the expected structure, the method may throw a deserialization exception.

Examples

Example: Loading Chart data from a JSON string:

SfChartWizard chartWizard = new SfChartWizard();
await chartWizard.LoadChartAsync(diagramJson);

OnAfterRenderAsync(bool)

Executes after the component is rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

A value that indicates whether this is the first time the component has been rendered.
Returns
Type Description
Task

A task that represents the asynchronous operation.
Overrides

OnInitialized()

Initializes the component after it is first created.

Declaration
protected override void OnInitialized()
Overrides

OnParametersSetAsync()

Executes when component parameters are set.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
Task

A task that represents the asynchronous operation.
Overrides

SaveChart()

Serializes the current state of the SfChartWizard component into a JSON string.

Declaration
public string SaveChart()
Returns
Type Description
string

A string containing the JSON representation of the complete chart state, including all configuration settings and layout details.
Remarks

The serialized output includes all chart elements, their properties, layout information, series configurations, axes, legends, styling, and other runtime state data.

The resulting JSON string can later be passed to a compatible load operation (such as LoadChartAsync(string)) to fully restore the chart to the saved state.

Examples

Example: Saving the current Chart Wizard state to a JSON string:

SfChartWizard chartWizard = new SfChartWizard();
string chartJson = chartWizard.SaveChart();

Implements