Table of Contents

Class BOBChartBase<TX, TY>

Namespace
BlazOrbit.Charts.Components
Assembly
BlazOrbit.Charts.dll

Abstract base for every BOBCharts component (Bar, Line, Pie / Donut, Area). Provides:

  • The <bob-component data-bob-component="…" data-bob-data-visualization-base> host element shared by the family.
  • A child <svg> root sized by Width / Height (or 100% when both are null).
  • The RenderSvg(RenderTreeBuilder) hook concrete charts override to emit their geometry inside the SVG.
  • Optional Export-as-PNG button wired through IChartJsInterop.

Concrete subclasses are sealed and live in the same namespace. 

public abstract class BOBChartBase<TX, TY> : BOBComponentBase, IDataVisualizationFamilyComponent

Type Parameters

TX

Type of the X-axis values.

TY

Type of the Y-axis values.

Inheritance
object
ComponentBase
BOBChartBase<TX, TY>
Implements
Derived
Inherited Members

Constructors

BOBChartBase() 

protected BOBChartBase()

Properties

Animated

Whether geometry transitions are animated when data changes - bar heights resize, line markers slide, pie slice arcs grow. Default true.

Animations are CSS-transition driven and automatically respect the user's prefers-reduced-motion setting; setting this to false is only needed when consumers want a hard cutover (e.g. live-streaming dashboards where smooth interpolation would trail behind the real value). 

[Parameter]
public bool Animated { get; set; }

Property Value

bool

AnimationDuration

Duration of the data-update transition, in milliseconds. Default 400. Ignored when Animated is false or the user has opted into prefers-reduced-motion.

[Parameter]
public int AnimationDuration { get; set; }

Property Value

int

AspectRatio

CSS aspect ratio applied when neither Width nor Height are set (e.g. "16/9").

[Parameter]
public string AspectRatio { get; set; }

Property Value

string

ExportFileName

Filename (without extension) used for the PNG export. Defaults to "chart"; consumers should set this to something more descriptive (e.g. "sales-by-quarter").

[Parameter]
public string ExportFileName { get; set; }

Property Value

string

Height

Optional explicit height in pixels. When null the chart fills its container.

[Parameter]
public int? Height { get; set; }

Property Value

int?

LegendPosition

Anchor of the legend block relative to the plot area. None hides the legend entirely (equivalent to ShowLegend = false).

[Parameter]
public BOBChartLegendPosition LegendPosition { get; set; }

Property Value

BOBChartLegendPosition

OnChartReady

Fired exactly once, after the chart has completed its first render. Useful for triggering downstream actions that require the SVG to be in the DOM (e.g. measuring, programmatic export).

[Parameter]
public EventCallback OnChartReady { get; set; }

Property Value

EventCallback

OnLegendToggle

Fired when the user toggles a legend entry. The argument is the Label of the affected series / slice. Fires after the hidden-series set has been mutated, so consumers can read the current visibility state via BlazOrbit.Charts.Components.BOBChartBase<TX, TY>.IsSeriesHidden(string).

[Parameter]
public EventCallback<string> OnLegendToggle { get; set; }

Property Value

EventCallback<string>

ShowExportButton

When true, a small "Export PNG" button is rendered in the chart's top-right corner. Clicking it triggers a client-side SVG → PNG rasterization (white background) and a browser download.

[Parameter]
public bool ShowExportButton { get; set; }

Property Value

bool

ShowLegend

Whether the legend block is visible. The legend lists every series / slice with its color marker; clicking an entry toggles that series visibility. Default true.

[Parameter]
public bool ShowLegend { get; set; }

Property Value

bool

Theme

Forces a specific theme palette regardless of the application's current theme. Inherit (default) keeps the chart in sync with the host's data-bob-theme; Light or Dark emits a chart-local data-bob-theme override.

[Parameter]
public BOBChartTheme Theme { get; set; }

Property Value

BOBChartTheme

TooltipFormat

string.Format-style pattern for the default cartesian tooltip (used when TooltipTemplate is null). Receives {0} = label, {1} = X, {2} = Y. Default produces "<label>: <X> = <Y>".

[Parameter]
public string? TooltipFormat { get; set; }

Property Value

string

TooltipTemplate

Custom tooltip render fragment. When set, replaces the native SVG <title> tooltip on cartesian charts (Bar / Line / Area) with an HTML overlay that follows the hovered data point. Receives a BOBChartTooltipContext<TX, TY> with the active series label, X, Y and resolved color.

Pie / Donut continue to use the native <title> tooltip - for custom slice UI use OnSliceHover + your own panel. 

[Parameter]
public RenderFragment<BOBChartTooltipContext<TX, TY>>? TooltipTemplate { get; set; }

Property Value

RenderFragment<BOBChartTooltipContext<TX, TY>>

Width

Optional explicit width in pixels. When null the chart fills its container.

[Parameter]
public int? Width { get; set; }

Property Value

int?

Methods

BuildAriaLabel()

Default ARIA label for the chart's <svg> root. Subclasses override to inject series / value summaries (improves screen-reader experience).

protected virtual string BuildAriaLabel()

Returns

string

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder builder)

Parameters

builder RenderTreeBuilder

A Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder that will receive the render output.

DisposeAsync()

Tears down the JS-side behavior associated with this component.

public override ValueTask DisposeAsync()

Returns

ValueTask

ExportAsPngAsync()

Trigger a PNG export of the chart's <svg>. Public so consumers can wire the export to their own UI (e.g. an action menu) without enabling ShowExportButton.

public Task ExportAsPngAsync()

Returns

Task

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any Microsoft.AspNetCore.Components.ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned System.Threading.Tasks.Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time Microsoft.AspNetCore.Components.ComponentBase.OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

The Microsoft.AspNetCore.Components.ComponentBase.OnAfterRender(bool) and Microsoft.AspNetCore.Components.ComponentBase.OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

OnResize(double, double)

Invoked by the JS-side ResizeObserver on every host-element dimension change. Rounds to integer pixels (sub-pixel oscillation in the observer would force needless re-renders).

[JSInvokable]
public Task OnResize(double width, double height)

Parameters

width double
height double

Returns

Task

RenderSvg(RenderTreeBuilder)

Concrete charts override this to emit SVG content. The supplied builder is positioned inside the <svg> root, so implementations only need to add geometry primitives (lines, paths, rects, text). Sequence numbers must remain unique within the override.

protected abstract void RenderSvg(RenderTreeBuilder builder)

Parameters

builder RenderTreeBuilder

Render tree builder positioned inside the SVG root.

ToggleSeriesAsync(string)

Toggle the visibility of a series / slice by label. Updates internal state, fires OnLegendToggle, then triggers a re-render.

public Task ToggleSeriesAsync(string label)

Parameters

label string

Returns

Task
Edit this page