axisDefaults: Object
Default options for all chart axes.
categoryAxis: Object
The category axis configuration options.
axisCrossingValue: Number(default: 0)
Category index at which the first value axis crosses this axis.
axisCrossingValue: Array(default: [0])
Category indicies at which the value axes cross the category axis.

Note:  Specify an index greater than or equal to the number of categories to denote the far end of the axis.

Example

$("#chart").kendoChart({
     categoryAxis: {
         categories: ["A", "B"]
             axisCrossingValue: [0, 100]
         },
     valueAxis: [{ }, { name: "secondary" }],
     ...
})'
</p>
categories: Array
Array of category names.

Example

$("#chart").kendoChart({
    categoryAxis: {
        categories: [ 2005, 2006, 2007, 2008, 2009 ]
    },
    ...
});
color: String
Color to apply to all axis elements. Any valid CSS color string will work here, including hex and rgb. Individual color settings for line and labels take priority.
field: String
The data field containing the category name.

Example

// assuming the following data...
var data = [ { sales: 200, year: 2005 }, { sales: 300, year: 2006 }, { sales: 400, year: 2007 }];
// specify the "year" as the field for the category axis
$("#chart").kendoChart({
    ...,
    categoryAxis: {
        field: "year"
    },
    ...
});
labels: Object
Configures the axis labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        labels: {
            // set the background color of the labels to a light grey
            background: "#e2e2e2",
            // rotate the labels just slightly for visual effect
            rotation: 10,
            // format the labels for currency
            format: "C"
        }
    },
    ...
});
background: String
The background color of the labels. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        labels: {
            border: {
                // make the width 1
                width: 1,
                // set the color to a dark blue
                color: "#336699",
                // set the border style to dashed
                dashType: "dash"
            }
        }
    },
    ...
});
color: String(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels. Any valid CSS color string will work here, including hex and rgb.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        labels: {
            // make the font 14px
            font: "14px Arial,Helvetica,sans-serif"
        }
    },
    ...
});
format: String
The format of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
       labels: {
           // set the format to currency
           format: "C"
       }
    },
    ...
});
margin: Number | Object(default: 0)
The margin of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        label: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
        }
    },
    ...
});
//
$("#chart").kendoChart({
    categoryAxis: {
        label: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 0px (by default)
            margin: { top: 1, left: 1 }
        }
    },
    ...
});
mirror: Boolean
Mirrors the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.

Example

$("#chart").kendoChart({
    categoryAxis: {
        labels: {
            // mirror the labels on the right
            mirror: true
        }
    },
    ...
});
padding: Number | Object(default: 0)
The padding of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        label: {
            // sets the top, right, bottom and left padding to 3px.
            padding: 3
        }
    },
    ...
});
//
$("#chart").kendoChart({
    categoryAxis: {
        label: {
            // sets the top and left padding to 1px
            // padding right and bottom are with 0px (by default)
            padding: { top: 1, left: 1 }
        }
    },
    ...
});
rotation: Number(default: 0)
The rotation angle of the labels.
skip: Number(default: 1)
Number of labels to skip. Skips rendering the first n labels.
step: Number(default: 1)
Label rendering step. Every n-th label is rendered where n is the step
template: String/Function
The label template. Template variables:
  • value - the value

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003],
         labels: {
             // labels template
             template: "Year: #= value #"
         }
     }
});
visible: Boolean(default: true)
The visibility of the labels.

Example

$("#chart").kendoChart({
    categoryAxis: {
        labels: {
            // hide the lables
            visible: false
        }
    },
    ...
});
line: Object
Configures the axis line. This will also effect major and minor ticks, but not gridlines.

Example

$("#chart").kendoChart({
    categoryAxis: {
        line: {
            // change the line width to 2 pixels
            width: 2,
            // set the color to light grey
            color: "#e2e2e2"
        }
    },
    ...
});
color: String(default: "black")
The color of the lines. Any valid CSS color string will work here, including hex and rgb.

Note: This will also effect the major and minor ticks, but not the grid lines.

dashType: String(default: "solid")
The dash type of the line.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
visible: Boolean(default: true)
The visibility of the lines.

Example

$("#chart").kendoChart({
    categoryAxis: {
        line: {
            // hide the lines completely
            visible: false
        }
    },
    ...
});
width: Number(default: 1)
The width of the line. This will also effect the major and minor ticks, but not the grid lines.
majorGridLines: Object
Configures the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.

Example

$("#chart").kendoChart({
    categoryAxis: {
         majorGridLines: {
            // set the width of the lines to 2 pixels
            width: 2,
            // set the color to a dark blue
            color: "#336699"
        }
    },
    ...
});
color: String(default: "black")
The color of the lines. Any valid CSS color string will work here, including hex and rgb.
dashType: String(default: "solid")
The dash type of the grid lines.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
visible: Boolean(default: false)
The visibility of the lines.

Example

$("#chart").kendoChart({
    categoryAxis: {
        majorGridLines: {
            // hide the major grid lines
            visible: false
        }
    },
    ...
});
width: Number(default: 1)
The width of the lines.
majorTicks: Object
The major ticks of the axis.
size: Number(default: 4)
The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.
visible: Boolean(default: true)
The visibility of the major ticks.
minorGridLines: Object
Configures the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the chart.

Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor grid lines visibility being set to true

.

Example

$("#chart").kendoChart({
    categoryAxis: {
        minorGridLines: {
            // set visible to true
            visible: true,
            // set width to 2 pixels
            width: 2,
            // set the color to a dark blue
            color: "#336699"
        }
    },
    ...
});
color: String(default: "black")
The color of the lines. Any valid CSS color string will work here, including hex and rgb.

Note that this setting has no effect if the visibility of the minor grid lines is not set to true.

dashType: String(default: "solid")
The dash type of the grid lines.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
visible: Boolean(default: false)
The visibility of the lines.
width: Number(default: 1> The width of the lines.
The width of the lines.

Note that this setting has no effect if the visibility of the minor grid lines is not set to true.

minorTicks: Object
The minor ticks of the axis.
size: Number(default: 3)
The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.
visible: Boolean(default: false)
The visibility of the minor ticks.
name: Object(default: primary)
The unique axis name.
plotBands: Array
The plot bands of category axis. The plot band fields:
"from"
The start position of the plot band.
"to"
The end position of the plot band.
"color"
The color of the plot band.

Example

$("#chart").kendoChart({
    ...,
    categoryAxis: {
        plotBands: [{
            from: 0.2,
            to: 0.4,
            color: "green"
        }]
    },
 });
reverse: Boolean(default: false)
Reverses the axis direction - categories are listed from right to left and from top to bottom.
title: Object
The title of the category axis.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // set the text of the title
            text: "Sales By District",
            // decreate the font size of the title to 14 px
            font: "14px Arial,Helvetica,sans-serif",
            // move the title to the bottom
            position: "bottom"
        }
    },
    ...
});
background: String
The background color of the title. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the title.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // tweak the border around the title
            border: {
                // set the width to 1
                width: 1,
                // set the color to a dark blue
                color: "#336699",
                // set the style to dashed
                dashType: "dash"
            }
        }
    },
    ...
});
color: String(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

Example

width: Number(default: 0)
The width of the border.
color: String
The text color of the title. Any valid CSS color string will work here, including hex and rgb.
font: String(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // decreate the font size of the title to 14 px
            font: "14px Arial,Helvetica,sans-serif"
        }
    }
    ...
});
margin: Number|Object(default: 5)
The margin of the title.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
        }
    },
    ...
});
//
$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 0px (by default)
            margin: { top: 1, left: 1 }
        }
    },
    ...
});
position: String(default: "center")
The position of the title.
"top"
The axis title is positioned on the top (applicable to vertical axis)
"bottom"
The axis title is positioned on the bottom (applicable to vertical axis)
"left"
The axis title is positioned on the left (applicable to horizontal axis)
"right"
The axis title is positioned on the right (applicable to horizontal axis)
"center"
The axis title is positioned in the center
rotation: Number(default: 0)
The rotation angle of the title.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // rotate the title 20 degrees
            rotate: 20
        }
    },
    ...
});
text: String
The text of the title.
visible: Boolean(default: true)
The visibility of the title.

Example

$("#chart").kendoChart({
    categoryAxis: {
        title: {
            // hide the title
            visible: false
        }
    },
    ...
});
type: String(default: "Category")
The axis type.
"Category"
Discrete category axis.
"Date"
Specialized axis for displaying chronological data.
type: "Date"
Properties specific to the date-time value axis.

Note: The Chart will automatically switch to a date category axis if the categories are of type Date. Specify type explicitly when such behavior is undesired.

baseUnit: String
The base time interval for the axis. The default baseUnit is determined automatically from the minimum difference between subsequent categories. Available options:
  • hours
  • days
  • months
  • years
Series data is aggregated for the specified base unit by using the series.aggregate function.
labels: Object
Label settings specific to the date axis.
culture: String(default: global culture)
Culture to use for formatting the dates. See Globalization for more information.
dateFormats: Object
Date format strings
"hours"
"HH:mm"
"days"
"M/d"
"months"
"MMM 'yy"
"years"
"yyyy"
The Chart will choose the appropriate format for the current baseUnit. Setting the labels format option will override these defaults.
max: Number
The last date displayed on the axis. By default, the minimum date is the same as the last category. This is often used in combination with the min configuration option to set up a fixed date range.
min: Number
The first date displayed on the axis. By default, the minimum date is the same as the first category. This is often used in combination with the max configuration option to set up a fixed date range.
visible: Boolean(default: true)
The visibility of the axis.
chartArea: Object
The chart area configuration options. This is the entire visible area of the chart.
background: String(default: "white")
The background color of the chart area.
border: Object
The border of the chart area.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
height: Number(default: 400)
The height of the chart area.
margin: Number|Object(default: 5)
The margin of the chart area.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }
width: Number(default: 600)
The width of the chart area.
dataSource: Object
DataSource configuration or instance.

Example

$("#chart").kendoChart({
    dataSource: {
        transport: {
             read: "spain-electricity.json"
        }
    },
    series: [{
        field: "value"
    }],
    categoryAxis: {
        field: "year"
    }
});

// Alternative configuration
var dataSource = new kendo.data.DataSource({
    transport: {
         read: "spain-electricity.json"
    }
});

$("#chart").kendoChart({
    dataSource: dataSource,
    series: [{
        field: "value"
    }],
    categoryAxis: {
        field: "year"
    }
});
legend: Object
The chart legend configuration options.

Example

$("#chart").kendoChart({
    legend: {
        // set the background color to a dark blue
        background: "#336699",
        labels: {
            // set the font to a size of 14px
            font: "14px Arial,Helvetica,sans-serif",
            // set the color to red
            color: "red"
        },
        // move the legend to the left
        position: "left",
        // move the legend a bit closer to the chart by setting the x offset to 20
        offsetX: 20,
        // move the legend up to the top by setting the y offset to -100
        offsetY: -100,
    }
});
background: String(default: "white")
The background color of the legend. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the legend.

Example

$("#chart").kendoChart({
    legend: {
        border: {
            // set the border width to 2 pixels
            width: 2,
            // set the color to grey
            color: "grey",
            // set the dash type to solid. this is the default so we could leave this line out.
            dashType: "solid"
        }
    },
    ...
});
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

Example

width: Number(default: 0)
The width of the border.
labels: Object
Configures the legend labels.
color: String(default: "black")
The color of the labels. Any valid CSS color string will work here, including hex and rgb.
font: String(default: 12px Arial,Helvetica,sans-serif)
The font style of the labels.
margin: Number | Object(default: 10)
The margin of the legend.

Example

$("#chart").kendoChart({
    legend: {
        // sets the top, right, bottom and left margin to 3px.
        margin: 3
    },
    ...
});
//
$("#chart").kendoChart({
    legend: {
        // sets the top and left margin to 1px
        // margin right and bottom are with 10px (by default)
        margin: { top: 1, left: 1 }
    },
    ...
});
offsetX: Number(default: 0)
The X offset from its position. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels to the right of it's initial position. A negative value will move the legend to the left of the current position.

Example

$("#chart").kendoChart({
    legend: {
        // move the legend to the left side of the chart
        offsetX: 20
    },
    ...
});
offsetY: Number(default: 0)
The Y offset from its position. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels down from it's initial position. A negative value will move the legend upwards from the current position.

Example

$("#chart").kendoChart({
    legend: {
        // move the legend up 100 pixels
        offsetY: -100
    },
    ...
});
padding: Number | Object(default: 5)
The padding of the legend.

Example

// sets the top, right, bottom and left padding to 3px.
$("#chart").kendoChart({
    legend: {
        // sets the top, right, bottom and left padding to 3px.
        padding: 3
    },
    ...
});
//
$("#chart").kendoChart({
    legend: {
       // sets the top and left padding to 1px
       // padding right and bottom are with 5px (by default)
       padding: { top: 1, left: 1 }
    },
    ...
});
position: String(default: right)
The positions of the legend.
"top"
The legend is positioned on the top.
"bottom"
The legend is positioned on the bottom.
"left"
The legend is positioned on the left.
"right"
The legend is positioned on the right.
"custom"
The legend is positioned using OffsetX and OffsetY.
visible: Boolean(default: true)
The visibility of the legend.

Example

$("#chart").kendoChart({
    legend: {
        // hide the legend
        visible: false
    },
    ...
});
plotArea: Object
The plot area configuration options. This is the area containing the plotted series.
background: String(default: "white")
The background color of the plot area.
border: Object
The border of the plot area.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
margin: Number|Object(default: 5)
The margin of the plot area.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }
series: Array
Array of series definitions.

The series type is determined by the value of the type field. If a type value is missing, the type is assumed to be the one specified in seriesDefaults.

Each series type has a different set of options.

data: Array
Array of data points.
field: String
The data field containing the series value.
groupNameTemplate: String
Name template for auto-generated series when binding to grouped data. Template variables:
  • series - the series options
  • group - the data group
  • group.field - the name of the field used for grouping
  • group.value - the field value for this group.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     dataSource: {
         data: seriesData,
         group: {
             field: "product",
             dir: "desc"
         }
     },
     series: [{
             type: "bar",
             name: "Sales",
             fiels: "sales",
             groupNameTemplate: "#= series.name # for #= group.field # #= group.value #"
             // Sales for product Bar,
             // Sales for product Foo,
             // etc.
         }
     ]
});
name: String
The series name visible in the legend.
type="area"
Available options for area series:
aggregate: String(default: "max")
Aggregate function for date series. This function is used when a category (an year, month, etc.) contains two or more points. The function return value is displayed instead of the individual points.
"max"
The highest value for the date period.
"min"
The lowest value for the date period.
"sum"
The sum of all values for the date period.
"count"
The number of values for the date period.
"avg"
The average of all values for the date period.
function (values, series)
User-defined aggregate function.
color: String
The series base color.
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: { left: 5, right: 5})
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
position: String(default: "above")
Defines the position of the area labels.
"above"
The label is positioned at the top of the area chart marker.
"right"
The label is positioned at the right of the area chart marker.
"below"
The label is positioned at the bottom of the area chart marker.
"left"
The label is positioned at the left of the area chart marker.
template: String/Function
The label template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "area",
             name: "Series 1",
             data: [200, 450, 300, 125],
             labels: {
                 // label template
                 template: "#= value #%",
                 visible: true
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
The visibility of the labels.
line: String
The line of the area chart.
color: String
The line color of the area chart.
opacity: Number(default: 1)
The line opacity of the area chart.
width: String(default: 4)
The line width of the area chart.
markers: Object
Configures the area markers.
background: String
The background color of the current series markers.
border: Object
The border of the markers.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
size: Number(default: 6)
The marker size.
type: String(default: "circle")
Configures the markers shape type.
"square"
The marker shape is square.
"triangle"
The marker shape is triangle.
"circle"
The marker shape is circle.
visible: Boolean(default: false)
The markers visibility.
missingValues: String(default: "gap")
Configures the behavior for handling missing values in area series.
"interpolate"
The value is interpolated from neighboring points.
"zero"
The value is assumed to be zero.
"gap"
The line stops before the missing point and continues after it.
name: String
The series name.
opacity: Number(default: 0.4)
The series opacity.
stack: Boolean(default: false)
A value indicating if the series should be stacked.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "area",
             name: "Series 1",
             data: [200, 450, 300, 125],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value #"
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
type="bar"
Available options for bar series:
aggregate: String(default: "max")
Aggregate function for date series. This function is used when a category (an year, month, etc.) contains two or more points. The function return value is displayed instead of the individual points.
"max"
The highest value for the date period.
"min"
The lowest value for the date period.
"sum"
The sum of all values for the date period.
"count"
The number of values for the date period.
"avg"
The average of all values for the date period.
function (values, series)
User-defined aggregate function.
axis: String(default: primary)
The name of the value axis to use.
border: Object
The border of the series.
color: String(default: the color of the curren series)
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 1)
The width of the border.
color: String
The series base color.
colorField: String
The data field containing the bar color.
gap: Number(default: 1.5)
The distance between category clusters.
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: 2)
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 2px (by default)
margin: { top: 1, left: 1 }
padding: Number|Object(default: 2)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 2px (by default)
padding: { top: 1, left: 1 }
position: String(default: "outsideEnd")
Defines the position of the bar labels.
"center"
The label is positioned at the bar center.
"insideEnd"
The label is positioned inside, near the end of the bar.
"insideBase"
The label is positioned inside, near the base of the bar.
"outsideEnd"
The label is positioned outside, near the end of the bar. Not applicable for stacked bar series.
template: String/Function
The label template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "bar",
             name: "Series 1",
             data: [200, 450, 300, 125],
             labels: {
                 // label template
                 template: "#= value #%",
                 visible: true
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
The visibility of the labels.
name: String
The series name.
opacity: Number(default: 1)
The series opacity.
overlay: Object
The effects overlay.
gradient: String(default: "glass")
The gradient name.
"glass"
The bars have glass effect overlay.
"none"
The bars have no effect overlay.
spacing: Number(default: 0.4)
Space between bars.
stack: Boolean(default: false)
A value indicating if the series should be stacked.
stack: String
Indicates that the series should be stacked in a group with the specified name.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "bar",
             name: "Series 1",
             data: [200, 450, 300, 125],
             tooltip: {
                 visible: true,
             template: "#= category # - #= value #"
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
type="bubble"
Available options for bubble series:
border: Object
The border of the bubble.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
categoryField: String
The data field containing the bubble category name.
color: String
The series base color.
colorField: String
The data field containing the bubble color.
data: Array
Array of data items (optional). The bubble chart can be bound to an array of arrays with three numbers (X, Y and Size).

Example

// ...
 series:[{
     type: "bubble",
     data:[[1, 1, 1], [1, 2, 2]],
     name: "Points"
 }]
 // ...
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: { left: 5, right: 5})
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
position: String(default: "above")
Defines the position of the bubble labels.
"above"
The label is positioned at the top of the bubble chart marker.
"right"
The label is positioned at the right of the bubble chart marker.
"below"
The label is positioned at the bottom of the bubble chart marker.
"left"
The label is positioned at the left of the bubble chart marker.
template: String/Function
The label template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • value.size - the size value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "bubble",
             name: "Series 1",
             data: [[1, 1, 1], [1, 2, 2], [1, 3, 3]],
             labels: {
                 // label template
                 template: "#= value.x # - #= value.y # - #= value.size #",
                 visible: true
             }
         }
     ]
});
visible: Boolean(default: false)
The visibility of the labels.
maxSize: Number(default: 100)
The max size of the bubble.
minSize: Number(default: 5)
The min size of the bubble.
name: String
The series name.
negativeValues: Object
The settings for negative values.
color: String(default: "#ffffff")
The color of the negative values.
visible: Boolean(default: false)
The visibility of the negative values.
opacity: Number(default: 0.6)
The series opacity.
sizeField: String
The data field containing the bubble size value.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format. Format variables:
  • 0 - the x value
  • 1 - the y value
  • 2 - the size value
  • 3 - the category name

Example

//sets format of the tooltip
format: "{0:C}--{1:C}"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • value.size - the size value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "bubble",
             name: "Series 1",
             data: [[1, 1, 1], [1, 2, 2], [1, 3, 3]],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value.x # - #= value.y # - #= value.size #"
             }
         }
     ]
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
visibleInLegendField: String
A boolean value indicating whether to show the bubble category name in the legend.
xAxis: String(default: primary)
The name of the X axis to use.
xField: String
The data field containing the bubble x value.
yAxis: String(default: primary)
The name of the Y axis to use.
yField: String
The data field containing the bubble y value.
type="column"
Column series accepts the same parameters as bar series. The difference is that column series are rendered on a horizontal category axis.
type="donut"
Available options for donut series:
border: Object
The border of the series.
color: String(default: the color of the curren series)
The color of the border.
dashType: String(default: solid)
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 1)
The width of the border.
categoryField: String
The data field containing the sector category name.
colorField: String
The data field containing the sector color.
connectors: Object
The label connectors options.
color: String
The color of the connector line.
padding: Number(default: 4)
The padding between the connector line and the label, and connector line and donut chart.
width: Number(default: 1)
The width of the connector line.
data: Array
Array of data items (optional). The donut chart can be bound to an array of numbers or an array of objects with the following fields:
"value"
The sector value.
"category"
The sector category that is shown in the legend.
"color"
The sector color.
"explode"
A boolean value indicating whether to explode the sector(available only for the last level of the series).
"visibleInLegend"
A boolean value indicating whether to show the sector in the legend.

Example

// ...
 series:[{
     type: "donut",
     data:[{
         value: 40,
         category: "Apples"
     }, {
         value: 60,
         category: "Oranges",
         color: "#ff6103"
     }],
     name: "Sales in Percent"
 }]
 // ...
explodeField: String
The data field containing a boolean value that indicates if the sector is exploded (available only for the last level of the series).
holeSize: Number
The the size of the donut hole.
labels: Object
Configures the series data labels.
align: String(default: "circle")
Defines the alignment of the donut labels.
"circle"
The labels are positioned in circle around the donut chart.
"column"
The labels are positioned in columns to the left and right of the donut chart.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
distance: Number(default: 35)
The distance of the labels.
font: String(default: "12px Arial, sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: 0.5)
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 2px (by default)
margin: { top: 1, left: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 2px (by default)
padding: { top: 1, left: 1 }
position: String(default: "center")
Defines the position of the donut labels.
"center"
The labels are positioned at the center of the donut segments.
"insideEnd"
The labels are positioned inside, near the end of the donut segments.
"outsideEnd"
The labels are positioned outside, near the end of the donut segments. The labels and the donut segments are connected with connector line.
template: String/Function
The label template. Template variables:
  • value - the point value
  • percentage - the point value represented as a percentage value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
         type: "donut",
         data: [
             { value: 200, category: 2000 },
             { value: 450, category: 2001 },
             { value: 300, category: 2002 },
             { value: 125, category: 2003 }
         ],
         labels: {
             // label template
             template: "#= value #%",
             visible: true
         }
     }]
});
visible: Boolean(default: false)
The visibility of the labels.
margin: Number(default: 1)
The margin around each series (not available for the last level of the series).
opacity: Number(default: 1)
The series opacity.
overlay: Object
The effects overlay.
gradient: String(default: "roundedBevel")
The gradient name. Available options are "none" and "roundedCircle".
padding: Number
The padding around the donut chart (equal on all sides).
size: Number
The size of the series.
startAngle: number(default: 90)
The start angle of the first donut segment.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • percentage - the point value represented as a percentage value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
             type: "donut",
             name: "Series 1",
             data: [200, 450, 300, 125],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value #"
             }
     }]
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
type="line"
Available options for line series:
aggregate: String(default: "max")
Aggregate function for date series. This function is used when a category (an year, month, etc.) contains two or more points. The function return value is displayed instead of the individual points.
"max"
The highest value for the date period.
"min"
The lowest value for the date period.
"sum"
The sum of all values for the date period.
"count"
The number of values for the date period.
"avg"
The average of all values for the date period.
function (values, series)
User-defined aggregate function.
axis: String(default: primary)
The name of the value axis to use.
color: String
The series base color.
dashType: String(default: "solid")
The dash type of the line.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: { left: 5, right: 5})
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
position: String(default: "above")
Defines the position of the line labels.
"above"
The label is positioned at the top of the line chart marker.
"right"
The label is positioned at the right of the line chart marker.
"below"
The label is positioned at the bottom of the line chart marker.
"left"
The label is positioned at the left of the line chart marker.
template: String/Function
The label template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "line",
             name: "Series 1",
             data: [200, 450, 300, 125],
             labels: {
                 // label template
                 template: "#= value #%",
                 visible: true
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
The visibility of the labels.
markers: Object
Configures the line markers.
background: String
The background color of the current series markers.
border: Object
The border of the markers.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
size: Number(default: 6)
The marker size.
type: String(default: "circle")
Configures the markers shape type.
"square"
The marker shape is square.
"triangle"
The marker shape is triangle.
"circle"
The marker shape is circle.
visible: Boolean(default: true)
The markers visibility.
missingValues: String(default: "gap")
Configures the behavior for handling missing values in line series.
"interpolate"
The value is interpolated from neighboring points.
"zero"
The value is assumed to be zero.
"gap"
The line stops before the missing point and continues after it.
name: String
The series name.
opacity: Number(default: 1)
The series opacity.
stack: Boolean(default: false)
A value indicating if the series should be stacked.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "line",
             name: "Series 1",
             data: [200, 450, 300, 125],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value #"
             }
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
width: String(default: 4)
The line width of the line chart.
type="pie"
Available options for pie series:
border: Object
The border of the series.
color: String(default: the color of the curren series)
The color of the border.
dashType: String(default: solid)
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 1)
The width of the border.
categoryField: String
The data field containing the sector category name.
colorField: String
The data field containing the sector color.
connectors: Object
The label connectors options.
color: String
The color of the connector line.
padding: Number(default: 4)
The padding between the connector line and the label, and connector line and pie chart.
width: Number(default: 1)
The width of the connector line.
data: Array
Array of data items (optional). The pie chart can be bound to an array of numbers or an array of objects with the following fields:
"value"
The sector value.
"category"
The sector category that is shown in the legend.
"color"
The sector color.
"explode"
A boolean value indicating whether to explode the sector.
"visibleInLegend"
A boolean value indicating whether to show the sector in the legend.

Example

// ...
 series:[{
     type: "pie",
     data:[{
         value: 40,
         category: "Apples"
     }, {
         value: 60,
         category: "Oranges",
         color: "#ff6103"
         }
     ],
     name: "Sales in Percent"
 }]
 // ...
explodeField: String
The data field containing a boolean value that indicates if the sector is exploded.
labels: Object
Configures the series data labels.
align: String(default: "circle")
Defines the alignment of the pie labels.
"circle"
The labels are positioned in circle around the pie chart.
"column"
The labels are positioned in columns to the left and right of the pie chart.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
distance: Number(default: 35)
The distance of the labels.
font: String(default: "12px Arial, sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: 0.5)
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 2px (by default)
margin: { top: 1, left: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 2px (by default)
padding: { top: 1, left: 1 }
position: String(default: "outsideEnd")
Defines the position of the pie labels.
"center"
The labels are positioned at the center of the pie segments.
"insideEnd"
The labels are positioned inside, near the end of the pie segments.
"outsideEnd"
The labels are positioned outside, near the end of the pie segments. The labels and the pie segments are connected with connector line.
template: String/Function
The label template. Template variables:
  • value - the point value
  • percentage - the point value represented as a percentage value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "pie",
             name: "Series 1",
             data: [
                 { value: 200, category: 2000 },
                 { value: 450, category: 2001 },
                 { value: 300, category: 2002 },
                 { value: 125, category: 2003 }
             ],
             labels: {
                 // label template
                 template: "#= value #%",
                 visible: true
             }
         }
     ]
});
visible: Boolean(default: false)
The visibility of the labels.
opacity: Number(default: 1)
The series opacity.
overlay: Object
The effects overlay.
gradient: String(default: "roundedBevel")
The gradient name. Available options are "none", "sharpBevel" and "roundedBevel".
padding: Number
The padding around the pie chart (equal on all sides).
startAngle: number(default: 90)
The start angle of the first pie segment.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • percentage - the point value represented as a percentage value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "pie",
             name: "Series 1",
             data: [200, 450, 300, 125],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value #"
             }
         }
     ]
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
visibleInLegendField: Number
A boolean value indicating whether to show the sector in the legend.
visibleInLegendField: Number
A boolean value indicating whether to show the sector in the legend.
type="scatter"
Available options for scatter series:
color: String
The series base color.
data: Array
Array of data items (optional). The scatter chart can be bound to an array of arrays with two numbers (X and Y).

Example

// ...
 series:[{
     type: "scatter",
     data:[[1, 1], [1, 2]],
     name: "Points"
 }]
 // ...
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: { left: 5, right: 5})
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
position: String(default: "above")
Defines the position of the scatter labels.
"above"
The label is positioned at the top of the scatter chart marker.
"right"
The label is positioned at the right of the scatter chart marker.
"below"
The label is positioned at the bottom of the scatter chart marker.
"left"
The label is positioned at the left of the scatter chart marker.
template: String/Function
The label template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "scatter",
             name: "Series 1",
             data: [[1, 1], [1, 2], [1, 3]],
             labels: {
                 // label template
                 template: "#= value.x # - #= value.y x #",
                 visible: true
             }
         }
     ]
});
visible: Boolean(default: false)
The visibility of the labels.
markers: Object
Configures the scatter markers.
background: String
The background color of the current series markers.
border: Object
The border of the markers.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
size: Number(default: 6)
The marker size.
type: String(default: "circle")
Configures the markers shape type.
"square"
The marker shape is square.
"triangle"
The marker shape is triangle.
"circle"
The marker shape is circle.
visible: Boolean(default: true)
The markers visibility.
name: String
The series name.
opacity: Number(default: 1)
The series opacity.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "{0:C}--{1:C}"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "scatter",
             name: "Series 1",
             data: [[1, 1], [1, 2], [1, 3]],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value.x # - #= value.y #"
             }
         }
     ]
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
xAxis: String(default: primary)
The name of the X axis to use.
yAxis: String(default: primary)
The name of the Y axis to use.
type="scatterLine"
Available options for scatter line series:
color: String
The series base color.
dashType: String(default: "solid")
The dash type of the line.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
data: Array
Array of data items (optional). The scatter chart can be bound to an array of arrays with two numbers (X and Y).

Example

// ...
 series:[{
     type: "scatterLine",
     data:[[1, 1], [1, 2]],
     name: "Points"
 }]
 // ...
labels: Object
Configures the series data labels.
background: String
The background color of the labels.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

//sets format of the labels
format: "{0:C}--{1:C}"
margin: Number|Object(default: { left: 5, right: 5})
The margin of the labels.

Example

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and bottom margin to 1px
// margin left and right are with 5px (by default)
margin: { top: 1, bottom: 1 }
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
position: String(default: "above")
Defines the position of the scatter labels.
"above"
The label is positioned at the top of the scatter chart marker.
"right"
The label is positioned at the right of the scatter chart marker.
"below"
The label is positioned at the bottom of the scatter chart marker.
"left"
The label is positioned at the left of the scatter chart marker.
template: String/Function
The label template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "scatterLine",
             name: "Series 1",
             data: [[1, 1], [1, 2], [1, 3]],
             labels: {
                 // label template
                 template: "#= value.x # - #= value.y #",
                 visible: true
             }
         }
     ]
});
visible: Boolean(default: false)
The visibility of the labels.
markers: Object
Configures the scatter markers.
background: String
The background color of the current series markers.
border: Object
The border of the markers.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
size: Number(default: 6)
The marker size.
type: String(default: "circle")
Configures the markers shape type.
"square"
The marker shape is square.
"triangle"
The marker shape is triangle.
"circle"
The marker shape is circle.
visible: Boolean(default: true)
The markers visibility.
missingValues: String(default: "gap")
Configures the behavior for handling missing values in scatter series.
"interpolate"
The value is interpolated from neighboring points.
"zero"
The value is assumed to be zero.
"gap"
The line stops before the missing point and continues after it.
name: String
The series name.
opacity: Number(default: 1)
The series opacity.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value.x - the x value
  • value.y - the y value
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             type: "scatterLine",
             name: "Series 1",
             data: [[1, 1], [1, 2], [1, 3]],
             tooltip: {
                 visible: true,
                 template: "#= category # - #= value.x # - #= value.y #"
             }
         }
     ]
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
width: Number(default: 1)
The line width of the scatter line chart.
xAxis: String(default: primary)
The name of the X axis to use.
yAxis: String(default: primary)
The name of the Y axis to use.
type="verticalArea"
Vertical area series use the same options as area series. The category axis is rendered vertically instead of horizontally.
type="verticalLine"
Vertical line series accepts the same parameters as line series. The line and the category axis are now vertical instead of horizontal.
visibleInLegend: Boolean(default: true)
A value indicating whether to show the series in the legend.
seriesColors: Array
The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
seriesDefaults: Object
Default values for each series.
area: Object
The area configuration options. The default options for all area series. For more details see the series options.
bar: Object
The default options for all bar series. For more details see the series options.
border: Object
The border of the series.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
bubble: Object
The bubble configuration options. The default options for all bubble series. For more details see the series options.
column: Object
The column configuration options. The default options for all column series. For more details see the series options.
donut: Object
The donut configuration options. The default options for all donut series. For more details see the series options.
gap: Number(default: 1.5)
The distance between category clusters.
labels: Object
Configures the series data labels.

Example

$("#chart").kendoChart({
    seriesDefault: {
        // adjust the default label appearence for all series
        labels: {
            // set the margin on all sides to 1
            margin: 1,
            // format the labels as currency
            format: "C"
        }
    },
    ...
});
background: String
The background color of the labels. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the labels.
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels. Any valid CSS color string will work here, inlcuding hex and rgb.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels. labels

Example

$("#chart").kendoChart({
    seriesDefault: {
        // adjust the default label appearence for all series
        labels: {
            // set the font size to 14px
            font: "14px Arial,Helvetica,sans-serif"
        }
    },
    ...
});
format: String
The format of the labels.

Example

//sets format of the labels
format: "C"
margin: Number|Object(default: 0)
The margin of the labels.

Example

$("#chart).kendoChart({
     labels: {
         // sets the top, right, bottom and left margin to 3px.
         margin: 3
     },
     ...
});
//
$("#chart").kendoChart({
     labels: {
         // sets the top and left margin to 1px
         // margin right and bottom are with 0px (by default)
         margin: { top: 1, left: 1 }
     },
     ...
});
padding: Number|Object(default: 0)
The padding of the labels.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// padding right and bottom are with 0px (by default)
padding: { top: 1, left: 1 }
template: String/Function
The label template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     seriesDefault: {
         labels: {
             // label template
             template: "#= value  #%",
             visible: true
         }
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
The visibility of the labels.

Example

$("#chart").kendoChart({
    seriesDefault: {
        labels: {
            // hide all the series labels by default
            visible: true
        },
        ...
    }
});
line: Object
The line configuration options. The default options for all line series. For more details see the series options.
overlay: Object
The effects overlay.
pie: Object
The pie configuration options. The default options for all pie series. For more details see the series options.
scatter: Object
The scatter configuration options. The default options for all scatter series. For more details see the series options.
scatterLine: Object
The scatterLine configuration options. The default options for all scatterLine series. For more details see the series options.
spacing: Number(default: 0.4)
Space between bars.
stack: Boolean(default: false)
A value indicating if the series should be stacked.
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     seriesDefaults: {
         tooltip: {
             visible: true,
             template: "#= category # - #= value #"
         }
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     }
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
verticalArea: Object
The vertical area configuration options. The default options for all vertical area series. For more details see the series options.
verticalLine: Object
The vertical line configuration options. The default options for all vertical line series. For more details see the series options.
theme: String
Sets Chart theme. Available themes: default, blueOpal, black.
title: Object
The chart title configuration options.
align: String(default: "center")
The alignment of the title.
"left"
The text is aligned to the left.
"center"
The text is aligned to the middle.
"right"
The text is aligned to the right.
background: String(default: "white")
The background color of the title.
border: Object
The border of the title.

Example

$("#chart").kendoChart({
    // set border options on the title
    title: {
        border: {
            // set the border color to a dark blue
            color: "#336699",
            // set the width of the border to 2 pixels
            width: 2,
            // set the border style to long dashes
            dashType: "longDash"
        }
    },
    ...
});
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
font: String(default: "16px Arial,Helvetica,sans-serif")
The font of the title.
margin: Number | Object(default: 5)
The margin of the title.

Example

$("#chart").kendoChart({
    // sets the top, right, bottom and left margin to 3px.
    title: {
        margin: 3
    },
    ...
});
//
$("#chart").kendoChart({
    // sets the top and left margin to 1px
    // margin right and bottom are with 5px (by default)
    title: {
        margin: { top: 1, left: 1 }
    },
    ...
});
padding: Number | Object(default: 5)
The padding of the title.

Example

$("#chart").kendoChart({
    // sets the top, right, bottom and left padding to 3px.
    title: {
        padding: 3
    },
    ...
});
//
$("#chart").kendoChart({
    // sets the top and left padding to 1px
    // padding right and bottom are with 5px (by default)
    title: {
        padding: { top: 1, left: 1 }
    },
    ...
});
position: String(default: "top")
The position of the title.
"top"
The title is positioned on the top.
"bottom"
The title is positioned on the bottom.
text: String
The title of the chart.
visible: Boolean(default: false)
The visibility of the title.

Example

$("#chart ").kendoChart({
    title: {
        // hides the title
        visible: false
    },
    ...
});
tooltip: Object
The data point tooltip configuration options.
background: String
The background color of the tooltip. The default is determined from the series color.
border: Object
The border configuration options.
color: String(default: "black")
The color of the border.
width: Number(default: 0)
The width of the border.
color: String
The text color of the tooltip. The default is the same as the series labels color.
font: String(default: "12px Arial,Helvetica,sans-serif")
The tooltip font.
format: String
The tooltip format.

Example

//sets format of the tooltip
format: "C"
padding: Number|Object
The padding of the tooltip.

Example

// sets the top, right, bottom and left padding to 3px.
padding: 3

// sets the top and left padding to 1px
// right and bottom padding are left at their default values
padding: { top: 1, left: 1 }
template: String|Function
The tooltip template. Template variables:
  • value - the point value
  • category - the category name
  • series - the data series
  • dataItem - the original data item used to construct the point. Will be null if binding to array.

Example

$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     tooltip: {
         visible: true,
         template: "#= category # - #= value #"
     }
});
visible: Boolean(default: false)
A value indicating if the tooltip should be displayed.
transitions: Boolean(default: true)
A value indicating if transition animations should be played.
valueAxis: Object
The value axis configuration options.
axisCrossingValue: Number(default: 0)
Value at which the category axis crosses this axis.
color: String
Color to apply to all axis elements. Individual color settings for line and labels take priority. Any valid CSS color string will work here, including hex and rgb.
labels: Object
Configures the axis labels.

Example

$("#chart").kendoChart({
    valueAxis: {
        labels: {
            // set the color of the text on the labels to a dark blue
            color: "#336699",
            // set the background color of the labels to a light grey
            background: "#e2e2e2",
            // make the font 14px
            // rotate the labels just slightly for visual effect
            rotation: 10,
            // format the labels for currency
            format: "C"
        }
    },
    ...
});
background: String
The background color of the labels. Any valid CSS color string will work here, including hex and rgb
border: Object
The border of the labels.

Example

$("#chart").kendoChart({
    valueAxis: {
        labels: {
            border: {
                // make the width 1
                width: 1,
                // set the color to a dark blue
                color: "#336699",
                // set the border style to dashed
                dashType: "dash"
            }
        }
    },
    ...
});
color: String(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the labels. Any valid CSS color string will work here, including hex and rgb.
font: String(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
format: String
The format of the labels.

Example

$("#chart").kendoChart({
    valueAxis: {
       labels: {
           // set the format to currency
           format: "C"
       }
    },
    ...
});
margin: Number|Object(default: 0)
The margin of the labels.

Example

$("#chart").kendoChart({
    valueAxis: {
        label: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
       }
    },
    ...
});
//
$("#chart").kendoChart({
    valueAxis: {
        label: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 0px (by default)
            margin: { top: 1, left: 1 }
        }
    },
    ...
});
mirror: Boolean
Mirrors the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.

Example

$("#chart").kendoChart({
    valueAxis: {
        labels: {
            // mirror the labels on the right
             mirror: true
        }
    },
    ...
});
padding: Number | Object(default: 0)
The padding of the labels.

Example

$("#chart").kendoChart({
    valueAxis: {
        label: {
            // sets the top, right, bottom and left padding to 3px.
            padding: 3
        }
    },
    ...
});
//
$("#chart").kendoChart({
    valueAxis: {
        label: {
            // sets the top and left padding to 1px
            // padding right and bottom are with 0px (by default)
            padding: { top: 1, left: 1 }
        }
    },
    ...
});
rotation: Number(default: 0)
The rotation angle of the labels.
skip: Number(default: 1)
Number of labels to skip. Skips rendering the first n labels.
step: Number(default: 1)
Label rendering step. Every n-th label is rendered where n is the step
template: String/Function
The label template. Template variables:
  • value - the value

Example

// chart intialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [
         {
             name: "Series 1",
             data: [200, 450, 300, 125]
         }
     ],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     valueAxis: {
         labels: {
             // labels template
             template: "#= value #%"
         }
     }
});
visible: Boolean(default: true)
The visibility of the labels.

Example

$("#chart").kendoChart({
    valueAxis: {
        labels: {
            // hide the axis labels
            visible: false
        }
   },
   ...
});
line: Object
Configures the axis line. This will also affect the major and minor ticks, but not the grid lines.

Example

$("#chart").kendoChart({
    valueAxis: {
        line: {
            // change the line width to 2 pixels
            width: 2,
            // set the color to light grey
            color: "#e2e2e2"
        }
    },
    ...
});
color: String(default: "black")
The color of the line. This will also effect the major and minor ticks, but not the grid lines.
dashType: String(default: "solid")
The dash type of the line.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
visible: Boolean(default: true)
The visibility of the line.

Example

$("#chart").kendoChart({
    valueAxis: {
        line: {
            // hide the axis lines altogether
            visible: false
        }
    },
    ...
});
width: Number(default: 1)
The width of the line. This will also effect the major and minor ticks, but not the grid lines.
majorGridLines: Object
Configures the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.

Example

$("#chart").kendoChart({
    valueAxis: {
        minorGridLines: {
            // set visible to true
            visible: true,
            // set width to 2 pixels
            width: 2,
            // set the color to a dark blue
            color: "#336699",
            // set the dashType to dot
            dashType: "dot"
        }
    },
    ...
});
color: String(default: "black")
The color of the lines.
visible: Boolean(default: true)
The visibility of the lines.

Example

$("#chart").kendoChart({
    valueAxis: {
        minorGridLines: {
            // set visible to true
            visible: false
        }
    },
    ...
});
width: Number(default: 1)
The width of the lines.
majorTicks: Object
The major ticks of the axis.
size: Number(default: 4)
The axis major tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.
visible: Boolean(default: true)
The visibility of the major ticks.
majorUnit: Number
The interval between major divisions.
max: Number(default: 1)
The maximum value of the axis. This is often used in combination with the min configuration option.
min: Number(default: 0)
The minimum value of the axis. This is often used in combination with the max configuration option.
minorGridLines: Object
Configures the minor grid lines. These are the lines that are an extension of the minor ticks through the
color: String(default: "black")
The color of the lines.

Note that this has no effect if the visibility of the minor grid lines is not set to true.

dashType: String(default: "solid")
The dash type of the minor grid lines.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
body of the chart.

Note that minor grid lines are not visible by default, therefore none of these settings will take effect without the minor grid lines visibility being set to true

.

Example

$("#chart").kendoChart({
    valueAxis: {
        minorGridLines: {
            // set visible to true
            visible: true,
            // set width to 2 pixels
            width: 2,
            // set the color to a dark blue
            color: "#336699",
            // set the dashType to dot
            dashType: "dot"
        }
    },
    ...
});
visible: Boolean(default: false)
The visibility of the lines.

Example

$("#chart").kendoChart({
    valueAxis: {
        minorGridLines: {
            // set visible to true. they are hidden by default
            visible: true
        }
    },
    ...
});
width: Number(default: 1)
The width of the lines.

Note that this settings has no effect if the visibility of the minor grid lines is not set to true.

minorTicks: Object
The minor ticks of the axis.
size: Number(default: 3)
The axis minor tick size. This is the length of the line in pixels that is drawn to indicate the tick on the chart.
visible: Boolean(default: false)
The visibility of the minor ticks.
minorUnit: Number
The interval between minor divisions. It defaults to 1/5th of the majorUnit.
name: Object(default: primary)
The unique axis name.
plotBands: Array
The plot bands of the value axis. The plot band fields:
"from"
The start position of the plot band in axis units.
"to"
The end position of the plot band in axis units.
"color"
The color of the plot band.

Example

$("#chart").kendoChart({
    ...,
    valueAxis: {
        plotBands: [{
            from: 0.2,
            to: 0.4,
            color: "green"
        }]
    },
 });
reverse: Boolean(default: false)
Reverses the axis direction - values increase from right to left and from top to bottom.
title: Object
The title of the value axis.

Example

$("#chart").kendoChart({
    title: {
        // set the color of the title text to a dark blue
        color: "#336699",
        // set the background color to a light grey
        background: "#e2e2e2",
        // set the text of the title
        text: "Sales By District",
        // move the title to the bottom
        position: "bottom"
    },
    ...
});
background: String
The background color of the title. Any valid CSS color string will work here, including hex and rgb.
border: Object
The border of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // tweak the border around the title
            border: {
                // set the width to 1
                width: 1,
                // set the color to a dark blue
                color: "#336699",
                // set the style to dashed
                dashType: "dash"
            }
        }
    },
    ...
});
color: String(default: "black")
The color of the border.
dashType: String(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
width: Number(default: 0)
The width of the border.
color: String
The text color of the title. Any valid CSS color string will work here, including hex and rgb.
font: String(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // decreate the font size of the title to 14 px
            font: "14px Arial,Helvetica,sans-serif"
        }
    }
    ...
});
margin: Number | Object(default: 5)
The margin of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // sets the top, right, bottom and left margin to 3px.
            margin: 3
        }
    },
    ...
});
//
$("#chart").kendoChart({
    valueAxis: {
        title: {
            // sets the top and left margin to 1px
            // margin right and bottom are with 0px (by default)
            margin: { top: 1, left: 1 }
        }
    },
    ...
});
padding: Number | Object(default: 0)
The padding of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // sets the top, right, bottom and left padding to 3px.
            padding: 3
        }
    },
    ...
});
$("#chart").kendoChart({
    valueAxis: {
        title: {
            // sets the top and left padding to 1px
            // padding right and bottom are with 0px (by default)
            padding: { top: 1, left: 1 }
        }
    },
    ...
});
position: String(default: "center")
The position of the title.
"top"
The axis title is positioned on the top (applicable to vertical axis).
"bottom"
The axis title is positioned on the bottom (applicable to vertical axis).
"left"
The axis title is positioned on the left (applicable to horizontal axis).
"right"
"The axis title is positioned on the right (applicable to horizontal axis).
"center"
"The axis title is positioned in the center.
rotation: Number(default: 0)
The rotation angle of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // rotate the title 20 degrees
            rotate: 20
        }
    },
    ...
});
text: String
The text of the title.
visible: Boolean(default: true)
The visibility of the title.

Example

$("#chart").kendoChart({
    valueAxis: {
        title: {
            // hide the title
            visible: false
        }
    },
    ...
});
visible: Boolean(default: true)
The visibility of the axis.
xAxis: Object
Scatter charts X-axis configuration options. Includes all valueAxis options in addition to:
type: String(default: "Numeric")
The axis type.

Note: The Chart will automatically switch to a date axis if the series X value is of type Date. Specify type explicitly when such behavior is undesired.

"Numeric"
Generic axis with automatic range.
"Date"
Suitable for displaying chronological data.
type: "Date"
Properties specific to the date-time value axis
axisCrossingValue: Date
Date at which the Y axis crosses this axis.
baseUnit: String
The base time interval for the axis labels. The default baseUnit is determined automatically from the value range. Available options:
  • hours
  • days
  • months
  • years
labels: Object
Label settings specific to the date axis.
culture: String(default: global culture)
Culture to use for formatting the dates. See Globalization for more information.
dateFormats: Object
Date format strings
"hours"
"HH:mm"
"days"
"M/d"
"months"
"MMM 'yy"
"years"
"yyyy"
The Chart will choose the appropriate format for the current baseUnit. Setting the labels format option will override these defaults.
majorUnit: Number
The interval between major divisions in base units.
max: Date
The end date of the axis. This is often used in combination with the min configuration option.
min: Date
The start date of the axis. This is often used in combination with the max configuration option.
minorUnit: Number
The interval between minor divisions in base units. It defaults to 1/5th of the majorUnit.
type: "Numeric": Number
Options specific to the numeric axis.
axisCrossingValue(default: 0)
Value at which the first Y axis crosses this axis.
axisCrossingValue: Array(default: [0])
Values at which the Y axes cross this X axis.

Note:  Specify a value greater than or equal to the axis maximum value to denote the far end of the axis.

Example

$("#chart").kendoChart({
     ...,
     xAxis: {
         axisCrossingValue: [0, 1000]
     },
     yAxis: [{ }, { name: "secondary" }],
     ...
});
</p>
yAxis: Object
The scatter charts Y-axis configuration options. See xAxis for list of available options.