Back to all docs
API Reference / Kendo.Mvc.UI.Fluent / ChartBuilder<T>
New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

ChartBuilder<T>

Class

Defines the fluent interface for configuring the Chart<T> component.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Type Parameters:

T

Syntax:
C#
public class ChartBuilder<T> : WidgetBuilderBase<Chart<T>, ChartBuilder<T>>, IHtmlString where T : class

Inheritance: objectWidgetBuilderBase<Chart<T>, ChartBuilder<T>>ChartBuilder<T>

Implements: IHtmlString

Inherited Members WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ToComponent()WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.Name(string)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.Deferred(bool)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ModelMetadata(ModelMetadata)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.HtmlAttributes(object)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.HtmlAttributes(IDictionary<string, object>)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.AsModule(bool)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.Render()WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ScriptAttributes(object, bool)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ScriptAttributes(IDictionary<string, object>, bool)WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ToHtmlString()WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ToClientTemplate()WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.ToString()WidgetBuilderBase<Chart<T>, ChartBuilder<T>>.Componentobject.GetType()object.MemberwiseClone()object.ToString()object.Equals(object)object.Equals(object, object)object.ReferenceEquals(object, object)object.GetHashCode()...

Constructors

ChartBuilder(Chart<T>)

Initializes a new instance of the ChartBuilder<T> class.

C#
public ChartBuilder(Chart<T> component)
Parameters:componentChart<T>

The component.

Methods

AutoBind(bool)

Enables or disables automatic data binding during the initialization of the chart.

C#
public ChartBuilder<T> AutoBind(bool autoBind)
Parameters:autoBindbool

The value that enables or disabled the automatic data binding. The default value is true.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart&lt;SalesInfo&gt;()
.Name("Chart")
.DataSource(ds =&gt;
{
ds.Ajax().Read(r =&gt; r.Action("SalesData", "Chart"));
})
.AutoBind(false)
)

AxisDefaults(Action<ChartAxisDefaultsBuilder<T>>)

Defines the default options for all chart axes of the specified type.

C#
public ChartBuilder<T> AxisDefaults(Action<ChartAxisDefaultsBuilder<T>> configurator)
Parameters:configuratorAction<ChartAxisDefaultsBuilder<T>>

The action that configures the default settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.AxisDefaults(axisDefaults =&gt; axisDefaults.MinorTickSize(5))
)

CategoryAxis(Action<ChartCategoryAxisBuilder<T>>)

Configures the category axis of the chart.

C#
public ChartBuilder<T> CategoryAxis(Action<ChartCategoryAxisBuilder<T>> configurator)
Parameters:configuratorAction<ChartCategoryAxisBuilder<T>>

The action that configures the category axis options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.CategoryAxis(axis =&gt; axis
.Categories(s =&gt; s.DateString)
)
)

ChartArea(Action<ChartAreaBuilder>)

Defines the configuration of the chart area.

C#
public ChartBuilder<T> ChartArea(Action<ChartAreaBuilder> configurator)
Parameters:configuratorAction<ChartAreaBuilder>

The action that configures the chart area settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.ChartArea(chartArea =&gt; chartArea.Margin(20))
)

DataSource(Action<ReadOnlyAjaxDataSourceBuilder<T>>)

Defines the DataSource configuration of the chart.

C#
public ChartBuilder<T> DataSource(Action<ReadOnlyAjaxDataSourceBuilder<T>> configurator)
Parameters:configuratorAction<ReadOnlyAjaxDataSourceBuilder<T>>

The action that configures the DataSource settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart&lt;ChartViewModel&gt;()
.Name("Chart")
.DataSource(ds =&gt;
{
ds.Ajax().Read(r =&gt; r.Action("SalesData", "Chart"));
})
)

DataSource(string)

Specifies an external DataSource that will be used by the Chart.

C#
public ChartBuilder<T> DataSource(string dataSourceId)
Parameters:dataSourceIdstring

The id (Name) of the external DataSource.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().DataSource&lt;ProductViewModel&gt;()
.Name("dataSourceProducts")
)
@(Html.Kendo().Chart&lt;ProductViewModel&gt;()
.Name("chart")
.DataSource("dataSourceProducts")
)

Events(Action<ChartEventBuilder>)

Configures the client-side events of the Chart.

C#
public ChartBuilder<T> Events(Action<ChartEventBuilder> configurator)
Parameters:configuratorAction<ChartEventBuilder>

The client events configuration action.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Events(events =&gt; events
.DataBound("onDataBound")
)
)

Legend(Action<ChartLegendBuilder>)

Defines the legend configuration.

C#
public ChartBuilder<T> Legend(Action<ChartLegendBuilder> configurator)
Parameters:configuratorAction<ChartLegendBuilder>

The configuration action.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Legend(legend =&gt; legend.Visible(true).Position(ChartLegendPosition.Bottom))
)

Legend(bool)

Sets the visibility of the chart legend.

C#
public ChartBuilder<T> Legend(bool visible)
Parameters:visiblebool

A value indicating whether to show the legend.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Legend(false)
)

Messages(Action<ChartMessagesSettingsBuilder>)

Allows localization of the strings that are used in the widget.

C#
public ChartBuilder<T> Messages(Action<ChartMessagesSettingsBuilder> configurator)
Parameters:configuratorAction<ChartMessagesSettingsBuilder>

The configurator for the messages setting.

Returns:

ChartBuilder<T>

NoData(Action<ChartNoDataSettingsBuilder>)

When no series data is available, the Chart will display an overlay element that contains a message with the text "No data available". The overlay will be automatically cleared if the series receive data.To disable the "No Data" overlay, set this option to false.

C#
public ChartBuilder<T> NoData(Action<ChartNoDataSettingsBuilder> configurator)
Parameters:configuratorAction<ChartNoDataSettingsBuilder>

The configurator for the nodata setting.

Returns:

ChartBuilder<T>

NoData(bool)

When no series data is available, the Chart will display an overlay element that contains a message with the text "No data available". The overlay will be automatically cleared if the series receive data.To disable the "No Data" overlay, set this option to false.

C#
public ChartBuilder<T> NoData(bool enabled)
Parameters:enabledbool

Enables or disables the nodata option.

Returns:

ChartBuilder<T>

PaneDefaults(Action<ChartPaneDefaultsBuilder>)

Defines the default options for all panes.

C#
public ChartBuilder<T> PaneDefaults(Action<ChartPaneDefaultsBuilder> configurator)
Parameters:configuratorAction<ChartPaneDefaultsBuilder>

The configurator for the default settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.PaneDefaults(pd =&gt; pd.Background("#00ff00"))
)

Panes(Action<ChartPanesFactory>)

Defines the chart panes configuration. The panes are used to split the chart in two or more parts. They are ordered from top to bottom. Each axis can be associated with a pane by setting its pane option to the name of the desired pane. Axis that don't have specified pane are placed in the top (default) pane. The series are moved to the desired pane by associating them with an axis.

C#
public ChartBuilder<T> Panes(Action<ChartPanesFactory> configurator)
Parameters:configuratorAction<ChartPanesFactory>

The action that configures the panes.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.Panes(panes =&gt;
{
panes.Add("volume");
})
)

Pannable(Action<ChartPannableBuilder>)

Defines the pannable configuration of the Chart.

C#
public ChartBuilder<T> Pannable(Action<ChartPannableBuilder> configurator)
Parameters:configuratorAction<ChartPannableBuilder>

The action that configures the pannable settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable(pan =&gt; pan.Lock(ChartAxisLock.Y))
)

Pannable(bool)

Enables or disables the panning feature.

C#
public ChartBuilder<T> Pannable(bool enabled = true)
Parameters:enabledboolReturns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable()
)

Pdf(Action<PDFSettingsBuilder>)

Configures the PDF export settings.

C#
public ChartBuilder<T> Pdf(Action<PDFSettingsBuilder> configurator)
Parameters:configuratorAction<PDFSettingsBuilder>

The action that configures the PDF export settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("chart")
.Pdf(pdf =&gt; pdf.PaperSize("A4").Scale(0.8))
)

PersistSeriesVisibility(bool)

Specifies if the series visible option must be persisted when changing the DataSource data.

C#
public ChartBuilder<T> PersistSeriesVisibility(bool value)
Parameters:valuebool

A value indicating if the series visible option must be persisted.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.PersistSeriesVisibility(true)
)

PlotArea(Action<PlotAreaBuilder>)

Defines the configuration of the plot area.

C#
public ChartBuilder<T> PlotArea(Action<PlotAreaBuilder> configurator)
Parameters:configuratorAction<PlotAreaBuilder>

The action that configures the plot area settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.PlotArea(plotArea =&gt; plotArea.Margin(20))
)

RenderAs(RenderingMode)

Sets the preferred rendering engine. If it is not supported by the browser, the Chart will switch to the first available mode.

C#
public ChartBuilder<T> RenderAs(RenderingMode renderAs)
Parameters:renderAsRenderingMode

The enum value that sets the preferred rendering engine.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("chart")
.RenderAs(RenderingMode.Canvas)
)

Series(Action<ChartSeriesFactory<T>>)

Defines the chart series.

C#
public ChartBuilder<T> Series(Action<ChartSeriesFactory<T>> configurator)
Parameters:configuratorAction<ChartSeriesFactory<T>>

The action that configures the series options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.Series(series =&gt;
{
series.Bar(s =&gt; s.SalesAmount);
})
)

SeriesColors(IEnumerable<string>)

Sets the default colors for the chart's series. When all colors are used, new colors are pulled from the start again.

C#
public ChartBuilder<T> SeriesColors(IEnumerable<string> colors)
Parameters:colorsIEnumerable<string>

A list of the color values.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors(new string[] { "#f00", "#0f0", "#00f" })
)

SeriesColors(params string[])

Sets the default colors for the chart's series. When all colors are used, new colors are pulled from the start again.

C#
public ChartBuilder<T> SeriesColors(params string[] colors)
Parameters:colorsstring[]

An array that holds the color values.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors("#f00", "#0f0", "#00f")
)

SeriesDefaults(Action<ChartSeriesDefaultsBuilder<T>>)

Defines the default options for all chart series of the specified type.

C#
public ChartBuilder<T> SeriesDefaults(Action<ChartSeriesDefaultsBuilder<T>> configurator)
Parameters:configuratorAction<ChartSeriesDefaultsBuilder<T>>

The action that configures the default series options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.SeriesDefaults(series =&gt; series.Bar().Stack(true))
)

Subtitle(Action<ChartTitleBuilder>)

Defines the configuration of the chart subtitle.

C#
public ChartBuilder<T> Subtitle(Action<ChartTitleBuilder> configurator)
Parameters:configuratorAction<ChartTitleBuilder>

The action that configures the subtitle settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Title(title =&gt; title.Text("Yearly sales"))
.Subtitle(subtitle =&gt; subtitle.Text("/ thousands /"))
)

Subtitle(string)

Sets the subtitle of the chart.

C#
public ChartBuilder<T> Subtitle(string title)
Parameters:titlestring

The text of the subtitle.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
.Subtitle("/ thousands /")
)

Theme(string)

Sets the theme of the chart. With versions before R1 2023, the Theme options accepts the name of a LESS theme or "sass". When set to "sass", the chart will read the variables from the Sass-based themes. Note: Since the Q2 2024 release, the default value for the Theme option is "sass" instead of "default". With version Q2 2024 or later, use "sass".

C#
public ChartBuilder<T> Theme(string theme)
Parameters:themestring

The name of the Less-based theme or "sass".

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Theme("sass")
)

Title(Action<ChartTitleBuilder>)

Defines the configuration of the chart title.

C#
public ChartBuilder<T> Title(Action<ChartTitleBuilder> configurator)
Parameters:configuratorAction<ChartTitleBuilder>

The action that configures the title settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Title(title =&gt; title.Text("Yearly sales"))
)

Title(string)

Sets the title of the chart.

C#
public ChartBuilder<T> Title(string title)
Parameters:titlestring

The text of the title.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
)

Tooltip(Action<ChartTooltipBuilder>)

Defines the series tooltip configuration.

C#
public ChartBuilder<T> Tooltip(Action<ChartTooltipBuilder> configurator)
Parameters:configuratorAction<ChartTooltipBuilder>

The action that configures the tooltip options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Tooltip(tooltip =&gt;
{
tooltip.Visible(true).Format("{0:C}");
})
)

Tooltip(bool)

Sets the visibility of the series tooltip.

C#
public ChartBuilder<T> Tooltip(bool visible)
Parameters:visiblebool

A value indicating if the data point tooltip must be displayed. The tooltip is not visible by default.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Tooltip(true)
)

Transitions(bool)

Enables or disabled animated transitions on initial load and refresh. By default, the animations are enabled.

C#
public ChartBuilder<T> Transitions(bool transitions)
Parameters:transitionsbool

A value indicating if transition animations must be played.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Transitions(false)
)

ValueAxis(Action<ChartValueAxisFactory<T>>)

Defines value axis options.

C#
public ChartBuilder<T> ValueAxis(Action<ChartValueAxisFactory<T>> configurator)
Parameters:configuratorAction<ChartValueAxisFactory<T>>

The action that configures the value axis options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.ValueAxis(a =&gt; a.Numeric().TickSize(4))
)

XAxis(Action<ChartValueAxisFactory<T>>)

Defines the X-axis configuration options of the Scatter Chart X-axis. The X-axis supports all ValueAxis options.

C#
public ChartBuilder<T> XAxis(Action<ChartValueAxisFactory<T>> configurator)
Parameters:configuratorAction<ChartValueAxisFactory<T>>

The action that configures the X-axis options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.XAxis(a =&gt; a.Numeric().Max(4))
)

YAxis(Action<ChartValueAxisFactory<T>>)

Defines the Y-axis configuration options of the Scatter Chart. The Y-axis supports all ValueAxis options.

C#
public ChartBuilder<T> YAxis(Action<ChartValueAxisFactory<T>> configurator)
Parameters:configuratorAction<ChartValueAxisFactory<T>>

The action that configures the Y-axis options.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart(Model)
.Name("Chart")
.YAxis(a =&gt; a.Numeric().Max(4))
)

Zoomable(Action<ChartZoomableBuilder>)

Defines the zoomable configuration of the Chart.

C#
public ChartBuilder<T> Zoomable(Action<ChartZoomableBuilder> configurator)
Parameters:configuratorAction<ChartZoomableBuilder>

The action that configures the zoomable settings.

Returns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable(zoom =&gt; zoom.Mousewheel(mouse =&gt; mouse.Lock(ChartAxisLock.Y)))
)

Zoomable(bool)

Enables or disables the zooming feature.

C#
public ChartBuilder<T> Zoomable(bool enabled = true)
Parameters:enabledboolReturns:

ChartBuilder<T>

Example:
C#
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable()
)
In this article
DefinitionConstructorsChartBuilder(Chart<T>)MethodsAutoBind(bool)AxisDefaults(Action<ChartAxisDefaultsBuilder<T>>)CategoryAxis(Action<ChartCategoryAxisBuilder<T>>)ChartArea(Action<ChartAreaBuilder>)DataSource(Action<ReadOnlyAjaxDataSourceBuilder<T>>)DataSource(string)Events(Action<ChartEventBuilder>)Legend(Action<ChartLegendBuilder>)Legend(bool)Messages(Action<ChartMessagesSettingsBuilder>)NoData(Action<ChartNoDataSettingsBuilder>)NoData(bool)PaneDefaults(Action<ChartPaneDefaultsBuilder>)Panes(Action<ChartPanesFactory>)Pannable(Action<ChartPannableBuilder>)Pannable(bool)Pdf(Action<PDFSettingsBuilder>)PersistSeriesVisibility(bool)PlotArea(Action<PlotAreaBuilder>)RenderAs(RenderingMode)Series(Action<ChartSeriesFactory<T>>)SeriesColors(IEnumerable<string>)SeriesColors(params string[])SeriesDefaults(Action<ChartSeriesDefaultsBuilder<T>>)Subtitle(Action<ChartTitleBuilder>)Subtitle(string)Theme(string)Title(Action<ChartTitleBuilder>)Title(string)Tooltip(Action<ChartTooltipBuilder>)Tooltip(bool)Transitions(bool)ValueAxis(Action<ChartValueAxisFactory<T>>)XAxis(Action<ChartValueAxisFactory<T>>)YAxis(Action<ChartValueAxisFactory<T>>)Zoomable(Action<ChartZoomableBuilder>)Zoomable(bool)
Not finding the help you need?
Contact Support