Kendo.Mvc.UI.Fluent.ChartBarSeriesBuilderBase

Defines the fluent interface for configuring Bar series.

Methods

Stack(System.Boolean)

Sets a value indicating if the bars should be stacked.

Parameters

stacked System.Boolean

A value indicating if the bars should be stacked.

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Stack(true))
)

Stack(System.String)

Sets the name of the stack that this series belongs to. Each unique name creates a new stack.

Parameters

stackGroup System.String

The name of the stack group.

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Stack("Female"))
)

Stack(Kendo.Mvc.UI.ChartStackType,System.String)

Sets the name of the stack that this series belongs to. Each unique name creates a new stack.

Parameters

stackType Kendo.Mvc.UI.ChartStackType

The stack type.

stackGroup System.String

The name of the stack group.

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Stack("Female"))
)

Aggregate(Kendo.Mvc.UI.ChartSeriesAggregate)

Sets the aggregate function for date series. This function is used when a category (an year, month, etc.) contains two or more points.

Parameters

aggregate Kendo.Mvc.UI.ChartSeriesAggregate

Aggregate function name.

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Aggregate(ChartSeriesAggregate.Avg))
)

Gap(System.Double)

Set distance between category clusters.

        A value of 1 means that there is a total of 1 column width / bar height between categories.
        The distance is distributed evenly on each side.
        The default value is 1.5

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Gap(1))
)

Spacing(System.Double)

Sets a value indicating the distance between bars / categories.

Parameters

spacing System.Double

Value of 1 means that the distance between bars is equal to their width. The default value is 0

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series.Spacing(s => s.Sales).Spacing(1))
)

Labels(System.Action<Kendo.Mvc.UI.Fluent.ChartBarLabelsBuilder>)

Configures the bar chart labels.

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.ChartBarLabelsBuilder>

The configuration action.

Example (ASPX)

@(Html.Kendo().Chart(Model)
    .Name("Chart")
    .Series(series => series
        .Bar(s => s.Sales)
        .Labels(labels => labels
            .Position(ChartBarLabelsPosition.InsideEnd)
            .Visible(true)
        )
    )
)

Labels(System.Boolean)

Sets the visibility of bar chart labels.

Parameters

visible System.Boolean

The visibility. The default value is false.

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series
        .Bar(s => s.Sales)
        .Labels(true);
    )
)

Border(System.Int32,System.String,Kendo.Mvc.UI.ChartDashType)

Sets the bars border

Parameters

width System.Int32

The bars border width.

color System.String

The bars border color (CSS syntax).

dashType Kendo.Mvc.UI.ChartDashType

The bars border dash type.

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Border("1", "#000", ChartDashType.Dot))
)

Border(System.Action<Kendo.Mvc.UI.Fluent.ChartBorderBuilder>)

Configures the bar border

Parameters

configurator System.Action<Kendo.Mvc.UI.Fluent.ChartBorderBuilder>

The border configuration action

Overlay(Kendo.Mvc.UI.ChartBarSeriesOverlay)

Sets the bar effects overlay

Parameters

overlay Kendo.Mvc.UI.ChartBarSeriesOverlay

The bar effects overlay. The default is ChartBarSeriesOverlay.Glass

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).Overlay(ChartBarSeriesOverlay.None))
)

NegativeColor(System.String)

Sets the bar color for negative values

Parameters

color System.String

The bar color for negative values(CSS syntax).

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(s => s.Sales).NegativeColor("Red"))
)

Field(System.String)

Sets the value field for the series

Parameters

field System.String

The value field for the series

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(Model.Records).Field("Value"))
)

CategoryField(System.String)

Sets the category field for the series

Parameters

categoryField System.String

The category field for the series

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(Model.Records).Field("Value").CategoryField("Category"))
)

ColorField(System.String)

Sets the color field for the series

Parameters

colorField System.String

The color field for the series

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(Model.Records).Field("Value").ColorField("Color"))
)

NoteTextField(System.String)

Sets the note text field for the series

Parameters

noteTextField System.String

The note text field for the series

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(Model.Records).Field("Value").NoteTextField("NoteText"))
)

Visual(System.String)

Sets the series visual handler

Parameters

handler System.String

The handler name.

Example (Razor)

@(Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Bar(Model.Records).Field("Value").Visual("getSeriesVisual"))
)

Visual(System.Func<System.Object,System.Object>)

Sets the series visual handler

Parameters

handler System.Func<System.Object,System.Object>

The handler

Example (ASPX)

@(Html.Kendo().Chart()
    .Name("chart")
    .Series(series =>
    {
        series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors").Visual(
            @<text>
                function(e) {
                var origin = e.rect.origin;
                var center = e.rect.center();
                var bottomRight = e.rect.bottomRight();

                var path = new kendo.drawing.Path({
                fill: {
                color: e.options.color
                }
            })
            .moveTo(origin.x, bottomRight.y)
            .lineTo(bottomRight.x, bottomRight.y)
            .lineTo(center.x, origin.y)
            .close();

            return path;
            }
            </text>
            );
        })
    )