New to Telerik UI for ASP.NET MVC? Download free 30-day trial

ChartBuilder

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.Margin(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>

AsChildComponent()

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();
            )

ToHtmlString()

ToClientTemplate()

In this article
Not finding the help you need?