ChartBuilder
Defines the fluent interface for configuring the Chart component.
Methods
Events(System.Action)
Configures the client-side events.
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 preferred rendering engine.
Example
@(Html.Kendo().Chart()
.Name("chart")
.RenderAs(RenderingMode.Canvas)
)
Theme(System.String)
Sets the theme of the chart.
Parameters
theme - System.String
The Chart theme.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Theme("material")
)
ChartArea(System.Action)
Sets the Chart area.
Parameters
configurator - System.Action<ChartAreaBuilder>
The Chart area.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.ChartArea(chartArea => chartArea.Margin(20))
)
PlotArea(System.Action)
Sets the Plot area.
Parameters
configurator - System.Action<PlotAreaBuilder>
The Plot area.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.PlotArea(plotArea => plotArea.Мargin(20))
)
Title(System.String)
Sets the title of the chart.
Parameters
title - System.String
The Chart title.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
)
Title(System.Action)
Defines the title of the chart.
Parameters
configurator - System.Action<ChartTitleBuilder>
The configuration action.
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 Chart subtitle.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title("Yearly sales")
.Subtitle("/ thousands /")
)
Subtitle(System.Action)
Defines the subtitle of the chart.
Parameters
configurator - System.Action<ChartTitleBuilder>
The configuration action.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Title(title => title.Text("Yearly sales"))
.Subtitle(subtitle => subtitle.Text("/ thousands /"))
)
Legend(System.Boolean)
Sets the legend visibility.
Parameters
visible - System.Boolean
A value indicating whether to show the legend.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Legend(false)
)
Legend(System.Action)
Configures the legend.
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 add action.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.Series(series =>
{
series.Bar(s => s.SalesAmount);
})
)
SeriesDefaults(System.Action)
Defines the options for all chart series of the specified type.
Parameters
configurator - System.Action<ChartSeriesDefaultsBuilder>
The configurator.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.SeriesDefaults(series => series.Bar().Stack(true))
)
Panes(System.Action)
Defines the chart panes.
Parameters
configurator - System.Action<ChartPanesFactory>
The add action.
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>
Example
@(Html.Kendo().Chart()
.Name("chart")
.Pdf(pdf => pdf.PaperSize("A4").Scale(0.8))
)
AxisDefaults(System.Action)
Defines the options for all chart axes of the specified type.
Parameters
configurator - System.Action<ChartAxisDefaultsBuilder>
The configurator.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.AxisDefaults(axisDefaults => axisDefaults.MinorTickSize(5))
)
CategoryAxis(System.Action)
Configures the category axis
Parameters
configurator - System.Action<ChartCategoryAxisBuilder>
The configurator
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 configurator
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.ValueAxis(a => a.Numeric().TickSize(4))
)
XAxis(System.Action)
Defines X-axis options for scatter charts
Parameters
configurator - System.Action<ChartValueAxisFactory>
The configurator
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.XAxis(a => a.Numeric().Max(4))
)
YAxis(System.Action)
Configures Y-axis options for scatter charts.
Parameters
configurator - System.Action<ChartValueAxisFactory>
The configurator
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.YAxis(a => a.Numeric().Max(4))
)
DataSource(System.Action)
Data Source configuration
Parameters
configurator - System.Action<ReadOnlyAjaxDataSourceBuilder>
Use the configurator to set different data binding options.
Example
@(Html.Kendo().Chart(Model)
.Name("Chart")
.DataSource(ds =>
{
ds.Ajax().Read(r => r.Action("SalesData", "Chart"));
})
)
DataSource(System.String)
Specifies the id of an external DataSource to be used by the Chart.
Parameters
dataSourceId - System.String
The id (Name) of the DataSource widget.
Example
@(Html.Kendo().DataSource<ProductViewModel>()
.Name("dataSourceProducts")
)
@(Html.Kendo().Chart()
.Name("chart")
.DataSource("dataSourceProducts")
)
AutoBind(System.Boolean)
Enables or disables automatic binding.
Parameters
autoBind - System.Boolean
Gets or sets a value indicating if the chart should be data bound during initialization. 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 series colors.
Parameters
colors - System.Collections.Generic.IEnumerable<String>
A list of the series colors.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors(new string[] { "#f00", "#0f0", "#00f" })
)
SeriesColors(System.String[])
Sets the series colors.
Parameters
colors - System.String[]
The series colors.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.SeriesColors("#f00", "#0f0", "#00f")
)
Tooltip(System.Action)
Use it to configure the data point tooltip.
Parameters
configurator - System.Action<ChartTooltipBuilder>
Use the configurator to set data tooltip options.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Tooltip(tooltip =>
{
tooltip.Visible(true).Format("{0:C}");
})
)
Tooltip(System.Boolean)
Sets the data point tooltip visibility.
Parameters
visible - System.Boolean
A value indicating if the data point tooltip should 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.
Parameters
transitions - System.Boolean
A value indicating if transition animations should be played.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Transitions(false)
)
Pannable(System.Boolean)
Enables or disabled panning.
Parameters
enabled - System.Boolean
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable(true)
)
Pannable(System.Action)
Configure the chart pannable options.
Parameters
configurator - System.Action<ChartPannableBuilder>
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Pannable(pan => pan.Lock(ChartAxisLock.Y))
)
Zoomable(System.Boolean)
Enables or disabled zooming.
Parameters
enabled - System.Boolean
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable(true)
)
Zoomable(System.Action)
Configure the chart zoomable options.
Parameters
configurator - System.Action<ChartZoomableBuilder>
Example
@(Html.Kendo().Chart()
.Name("Chart")
.Zoomable(zoom => zoom.Mousewheel(mouse => mouse.Lock(ChartAxisLock.Y)))
)
PersistSeriesVisibility(System.Boolean)
Specifies if the series visible option should be persisted when changing the dataSource data.
Parameters
value - System.Boolean
A value indicating if the visible option should be persisted.
Example
@(Html.Kendo().Chart()
.Name("Chart")
.PersistSeriesVisibility(true)
)
PaneDefaults(System.Action)
The default options for all panes.
Parameters
configurator - System.Action<ChartPaneDefaultsBuilder>
The configurator for the panedefaults setting.
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 Kendo.Mvc.UI.Fluent.WidgetFactory.DeferredScripts(System.Boolean)
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>
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();
)