ChartBuilder
Methods
Events(System.Action)
Configures the client-side events of the Chart.
Parameters
configurator - System.Action<ChartEventBuilder>
The client events configuration action.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Events(events => events
.DataBound("onDataBound")
)
)
RenderAs(Kendo.Mvc.UI.RenderingMode)
Sets the preferred rendering engine. If it is not supported by the browser, the Chart will switch to the first available mode.
Parameters
renderAs - RenderingMode
The enum value that sets the preferred rendering engine.
Example
@(Html.Kendo().Chart()
.Name("chart")
.RenderAs(RenderingMode.Canvas)
)
Theme(System.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".
Parameters
theme - System.String
The name of the Less-based theme or "sass".
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Theme("sass")
)
ChartArea(System.Action)
Defines the configuration of the chart area.
Parameters
configurator - System.Action<ChartAreaBuilder>
The action that configures the chart area settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.ChartArea(chartArea => chartArea.Margin(20))
)
PlotArea(System.Action)
Defines the configuration of the plot area.
Parameters
configurator - System.Action<PlotAreaBuilder>
The action that configures the plot area settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.PlotArea(plotArea => plotArea.Margin(20))
)
Title(System.String)
Sets the title of the chart.
Parameters
title - System.String
The text of the title.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
)
Title(System.Action)
Defines the configuration of the chart title.
Parameters
configurator - System.Action<ChartTitleBuilder>
The action that configures the title settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title(title => title.Text("Yearly sales"))
)
Subtitle(System.String)
Sets the subtitle of the chart.
Parameters
title - System.String
The text of the subtitle.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
.Subtitle("/ thousands /")
)
Subtitle(System.Action)
Defines the configuration of the chart subtitle.
Parameters
configurator - System.Action<ChartTitleBuilder>
The action that configures the subtitle settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title(title => title.Text("Yearly sales"))
.Subtitle(subtitle => subtitle.Text("/ thousands /"))
)
Legend(System.Boolean)
Sets the visibility of the chart legend.
Parameters
visible - System.Boolean
A value indicating whether to show the legend.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Legend(false)
)
Legend(System.Action)
Defines the legend configuration.
Parameters
configurator - System.Action<ChartLegendBuilder>
The configuration action.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
)
Series(System.Action)
Defines the chart series.
Parameters
configurator - System.Action<ChartSeriesFactory>
The action that configures the series options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.Series(series =>
{
series.Bar(s => s.SalesAmount);
})
)
SeriesDefaults(System.Action)
Defines the default options for all chart series of the specified type.
Parameters
configurator - System.Action<ChartSeriesDefaultsBuilder>
The action that configures the default series options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.SeriesDefaults(series => series.Bar().Stack(true))
)
Panes(System.Action)
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.
Parameters
configurator - System.Action<ChartPanesFactory>
The action that configures the panes.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.Panes(panes =>
{
panes.Add("volume");
})
)
Pdf(System.Action)
Configures the PDF export settings.
Parameters
configurator - System.Action<PDFSettingsBuilder>
The action that configures the PDF export settings.
Example
@(Html.Kendo().Chart()
.Name("chart")
.Pdf(pdf => pdf.PaperSize("A4").Scale(0.8))
)
AxisDefaults(System.Action)
Defines the default options for all chart axes of the specified type.
Parameters
configurator - System.Action<ChartAxisDefaultsBuilder>
The action that configures the default settings.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.AxisDefaults(axisDefaults => axisDefaults.MinorTickSize(5))
)
CategoryAxis(System.Action)
Configures the category axis of the chart.
Parameters
configurator - System.Action<ChartCategoryAxisBuilder>
The action that configures the category axis options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.CategoryAxis(axis => axis
.Categories(s => s.DateString)
)
)
ValueAxis(System.Action)
Defines value axis options.
Parameters
configurator - System.Action<ChartValueAxisFactory>
The action that configures the value axis options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.ValueAxis(a => a.Numeric().TickSize(4))
)
XAxis(System.Action)
Defines the X-axis configuration options of the Scatter Chart X-axis. The X-axis supports all ValueAxis options.
Parameters
configurator - System.Action<ChartValueAxisFactory>
The action that configures the X-axis options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.XAxis(a => a.Numeric().Max(4))
)
YAxis(System.Action)
Defines the Y-axis configuration options of the Scatter Chart. The Y-axis supports all ValueAxis options.
Parameters
configurator - System.Action<ChartValueAxisFactory>
The action that configures the Y-axis options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.YAxis(a => a.Numeric().Max(4))
)
DataSource(System.Action)
Defines the DataSource configuration of the chart.
Parameters
configurator - System.Action<ReadOnlyAjaxDataSourceBuilder>
The action that configures the DataSource settings.
Example
@(Html.Kendo().Chart<ChartViewModel>()
.Name("Chart")
.DataSource(ds =>
{
ds.Ajax().Read(r => r.Action("SalesData", "Chart"));
})
)
DataSource(System.String)
Specifies an external DataSource that will be used by the Chart.
Parameters
dataSourceId - System.String
The id (Name) of the external DataSource.
Example
@(Html.Kendo().DataSource<ProductViewModel>()
.Name("dataSourceProducts")
)
@(Html.Kendo().Chart<ProductViewModel>()
.Name("chart")
.DataSource("dataSourceProducts")
)
AutoBind(System.Boolean)
Enables or disables automatic data binding during the initialization of the chart.
Parameters
autoBind - System.Boolean
The value that enables or disabled the automatic data binding. The default value is true.
Example
@(Html.Kendo().Chart<SalesInfo>()
.Name("Chart")
.DataSource(ds =>
{
ds.Ajax().Read(r => r.Action("SalesData", "Chart"));
})
.AutoBind(false)
)
SeriesColors(System.Collections.Generic.IEnumerable)
Sets the default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
Parameters
colors - System.Collections.Generic.IEnumerable<String>
A list of the color values.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors(new string[] { "#f00", "#0f0", "#00f" })
)
SeriesColors(System.String[])
Sets the default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
Parameters
colors - System.String[]
An array that holds the color values.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors("#f00", "#0f0", "#00f")
)
Tooltip(System.Action)
Defines the series tooltip configuration.
Parameters
configurator - System.Action<ChartTooltipBuilder>
The action that configures the tooltip options.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Tooltip(tooltip =>
{
tooltip.Visible(true).Format("{0:C}");
})
)
Tooltip(System.Boolean)
Sets the visibility of the series tooltip.
Parameters
visible - System.Boolean
A value indicating if the data point tooltip must be displayed. The tooltip is not visible by default.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Tooltip(true)
)
Transitions(System.Boolean)
Enables or disabled animated transitions on initial load and refresh. By default, the animations are enabled.
Parameters
transitions - System.Boolean
A value indicating if transition animations must be played.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Transitions(false)
)
Pannable(System.Boolean)
Enables or disables the panning feature.
Parameters
enabled - System.Boolean
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable()
)
Pannable(System.Action)
Defines the pannable configuration of the Chart.
Parameters
configurator - System.Action<ChartPannableBuilder>
The action that configures the pannable settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable(pan => pan.Lock(ChartAxisLock.Y))
)
Zoomable(System.Boolean)
Enables or disables the zooming feature.
Parameters
enabled - System.Boolean
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable()
)
Zoomable(System.Action)
Defines the zoomable configuration of the Chart.
Parameters
configurator - System.Action<ChartZoomableBuilder>
The action that configures the zoomable settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable(zoom => zoom.Mousewheel(mouse => mouse.Lock(ChartAxisLock.Y)))
)
PersistSeriesVisibility(System.Boolean)
Specifies if the series visible option must be persisted when changing the DataSource data.
Parameters
value - System.Boolean
A value indicating if the series visible option must be persisted.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.PersistSeriesVisibility(true)
)
PaneDefaults(System.Action)
Defines the default options for all panes.
Parameters
configurator - System.Action<ChartPaneDefaultsBuilder>
The configurator for the default settings.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.PaneDefaults(pd => pd.Background("#00ff00"))
)
Messages(System.Action)
Allows localization of the strings that are used in the widget.
Parameters
configurator - System.Action<ChartMessagesSettingsBuilder>
The configurator for the messages setting.
NoData(System.Action)
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.
Parameters
configurator - System.Action<ChartNoDataSettingsBuilder>
The configurator for the nodata setting.
NoData(System.Boolean)
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.
Parameters
enabled - System.Boolean
Enables or disables the nodata option.
ToComponent()
Returns the internal view component.
Name(System.String)
Sets the name of the component.
Parameters
componentName - System.String
The name of the component.
Example
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Deferred(System.Boolean)
Suppress initialization script rendering. Note that this options should be used in conjunction with
Parameters
deferred - System.Boolean
ModelMetadata(System.Web.Mvc.ModelMetadata)
Uses the Metadata of the Model.
Parameters
modelMetadata - System.Web.Mvc.ModelMetadata
The metadata set for the Model
HtmlAttributes(System.Object)
Sets the HTML attributes.
Parameters
attributes - System.Object
The HTML attributes.
HtmlAttributes(System.Collections.Generic.IDictionary)
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
AsModule(System.Boolean)
Specifies whether the initialization script of the component will be rendered as a JavaScript module.
Parameters
value - System.Boolean
Render()
Renders the component.
Example
@(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
@( Html.Kendo().Grid(Model)
.Name("grid")
.DetailTemplate(product => {
)
Product Details:
<div>Product Name: @( product.ProductName )</div>
<div>Units In Stock: @( product.UnitsInStock )</div>
@(
})
.Render();
)
ScriptAttributes(System.Object,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Object
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.
ScriptAttributes(System.Collections.Generic.IDictionary,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.