Edit this page

kendo.dataviz.ui.Sparkline

Configuration

axisDefaults Object

Default options for all chart axes.

categoryAxis Array

The category axis configuration options.

categoryAxis.axisCrossingValue Object | Date | Array

Category index at which the first value axis crosses this axis. (Only for object)

Category indicies at which the value axes cross the category axis. (Only for array)

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

categoryAxis.categories Array

Array of category names.

categoryAxis.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.

categoryAxis.field String

The data field containing the category name.

categoryAxis.justified Boolean(default: false)

Positions categories and series points on major ticks. This removes the empty space before and after the series.

This option is ignored if either bar or column series are plotted on the axis.

categoryAxis.labels Object

Configures the axis labels.

categoryAxis.labels.background String

The background color of the labels. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.border Object

The border of the labels.

categoryAxis.labels.border.color String(default: "black")

The color of the border. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.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.

categoryAxis.labels.border.width Number(default: 0)

The width of the border.

categoryAxis.labels.color String

The text color of the labels. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.font String(default: "12px Arial,Helvetica,sans-serif")

The font style of the labels.

categoryAxis.labels.format String

The format of the labels.

categoryAxis.labels.margin Number | Object(default: 0)

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 0px (by default)
margin: { top: 1, left: 1 }

categoryAxis.labels.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.

categoryAxis.labels.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 }

categoryAxis.labels.rotation Number(default: 0)

The rotation angle of the labels.

categoryAxis.labels.skip Number(default: 1)

Number of labels to skip. Skips rendering the first n labels.

categoryAxis.labels.step Number(default: 1)

Label rendering step. Every n-th label is rendered where n is the step

categoryAxis.labels.template String | Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the category value
  • dataItem - the data item, in case a field has been specified

categoryAxis.labels.visible Boolean(default: true)

The visibility of the labels.

categoryAxis.line Object

Configures the axis line. This will also effect major and minor ticks, but not gridlines.

categoryAxis.line.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.

categoryAxis.line.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.

categoryAxis.line.visible Boolean(default: true)

The visibility of the lines.

categoryAxis.line.width Number(default: 1)

The width of the line. This will also effect the major and minor ticks, but not the grid lines.

categoryAxis.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.

categoryAxis.majorGridLines.color String(default: "black")

The color of the lines. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.majorGridLines.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.

categoryAxis.majorGridLines.visible Boolean(default: false)

The visibility of the lines.

categoryAxis.majorGridLines.width Number(default: 1)

The width of the lines.

categoryAxis.majorGridLines.step Number (default: 1)

The step of the category axis major grid lines.

categoryAxis.majorGridLines.skip Number (default: 0)

The skip of the category axis major grid lines.

categoryAxis.majorTicks Object

The major ticks of the axis.

categoryAxis.majorTicks.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.

categoryAxis.majorTicks.visible Boolean(default: true)

The visibility of the major ticks.

categoryAxis.majorTicks.color String (default: "black")

The color of the category axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.

categoryAxis.majorTicks.width Number (default: 1)

The width of the major ticks in pixels.

categoryAxis.majorTicks.step Number (default: 1)

The step of the category axis major ticks.

categoryAxis.majorTicks.skip Number (default: 0)

The skip of the category axis major ticks.

categoryAxis.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 totrue.

categoryAxis.minorGridLines.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 totrue.

categoryAxis.minorGridLines.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.

categoryAxis.minorGridLines.visible Boolean(default: false)

The visibility of the lines.

categoryAxis.minorGridLines.width Number

The width of the lines.

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

categoryAxis.minorGridLines.step Number (default: 1)

The step of the category axis minor grid lines.

categoryAxis.minorGridLines.skip Number (default: 0)

The skip of the category axis minor grid lines.

categoryAxis.minorTicks Object

The minor ticks of the axis.

categoryAxis.minorTicks.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.

categoryAxis.minorTicks.visible Boolean(default: false)

The visibility of the minor ticks.

categoryAxis.minorTicks.color String (default: "black")

The color of the category axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.

categoryAxis.minorTicks.width Number (default: 1)

The width of the minor ticks in pixels.

categoryAxis.minorTicks.step Number (default: 1)

The step of the category axis minor ticks.

categoryAxis.minorTicks.skip Number (default: 0)

The skip of the category axis minor ticks.

categoryAxis.name String(default: "primary")

The unique axis name.

categoryAxis.plotBands Array

The plot bands of the category axis.

categoryAxis.plotBands.from Number

The start position of the plot band in axis units.

categoryAxis.plotBands.to Number

The end position of the plot band in axis units.

categoryAxis.plotBands.color String

The color of the plot band.

categoryAxis.plotBands.opacity Number

The opacity of the plot band.

categoryAxis.reverse Boolean(default: false)

Reverses the axis direction - categories are listed from right to left and from top to bottom.

categoryAxis.title Object

The title of the category axis.

categoryAxis.title.background String

The background color of the title. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.title.border Object

The border of the title.

categoryAxis.title.border.color String(default: "black")

The color of the border. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.title.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.

categoryAxis.title.border.width Number(default: 0)

The width of the border.

categoryAxis.title.color String

The text color of the title. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.title.font String(default: "16px Arial,Helvetica,sans-serif")

The font style of the title.

categoryAxis.title.margin Number |Object(default: 5)

The margin of the title.

categoryAxis.title.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

categoryAxis.title.rotation Number(default: 0)

The rotation angle of the title.

categoryAxis.title.text String

The text of the title.

categoryAxis.title.visible Boolean(default: true)

The visibility of the title.

categoryAxis.type String(default: "category")

The axis type.

"category"

Discrete category axis.

"date"

Specialized axis for displaying chronological data.

categoryAxis.autoBaseUnitSteps Object

Specifies the discretebaseUnitStepvalues when eitherbaseUnitis set to "fit" orbaseUnitStepis set to "auto".

The default configuration is as follows:

  • minutes: [1, 2, 5, 15, 30]
  • hours: [1, 2, 3, 6, 12]
  • days: [1, 2, 3]
  • weeks: [1, 2]
  • months: [1, 2, 3, 6]
  • years: [1, 2, 3, 5, 10, 25, 50]

Each setting can be overriden individually.

Example

$("#sparkline").kendoSparkline({
    categoryAxis: {
        categories: [
            new Date("2012/02/01 00:00:00"),
            new Date("2012/02/02 00:00:00"),
            new Date("2012/02/20 00:00:00")
        ],
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            days: [3]
        }
    },
    ...
});

categoryAxis.baseUnit String

The base time interval for the axis. The default baseUnit is determined automatically from the minimum difference between subsequent categories. Available options:

  • minutes
  • hours
  • days
  • weeks
  • months
  • years **fit*

SettingbaseUnitto "fit" will set such base unit andbaseUnitStep that the total number of categories does not exceedmaxDateGroups.

Series data is aggregated for the specified base unit by using the series.aggregatefunction.

categoryAxis.baseUnitStep Object(default: 1)

Sets the step (interval) between categories in base units. Specifiying "auto" will set the step to such value that the total number of categories does not exceedmaxDateGroups.

This option is ignored ifbaseUnitis set to "fit".

categoryAxis.labels.culture String

Culture to use for formatting the dates. See Globalization for more information. It uses the global culture by default.

categoryAxis.labels.dateFormats Object

Date format strings

"hours"

"HH:mm"

"days"

"M/d"

"weeks"

"M/d"

"months"

"MMM 'yy"

"years"

"yyyy"

The Chart will choose the appropriate format for the current baseUnit. Setting the labelsformatoption will override these defaults.

categoryAxis.max Object

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 theminandroundToBaseUnitconfiguration options to set up a fixed date range.

categoryAxis.min Object

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 themaxandroundToBaseUnitconfiguration options to set up a fixed date range.

categoryAxis.roundToBaseUnit Boolean(default: true)

By default, the first and last dates will be rounded off to the nearest base unit. Specifyingfalsefor this option will disable this behavior.

This option is most useful in combination with explicitminandmaxdates.

It will be ignored if either bar or column series are plotted on the axis.

categoryAxis.weekStartDay Number(default: kendo.days.Sunday)

Specifies the week start day whenbaseUnitis set to "weeks". Use the kendo.days constants to specify the day by name.

  • kendo.days.Sunday (0)
  • kendo.days.Monday (1)
  • kendo.days.Tuesday (2)
  • kendo.days.Wednesday (3)
  • kendo.days.Thursday (4)
  • kendo.days.Friday (5)
  • kendo.days.Saturday (6)

categoryAxis.maxDateGroups Number(default: 10)

Specifies the maximum number of groups (categories) to produce when eitherbaseUnitis set to "fit" orbaseUnitStepis set to "auto".

This option is ignored in all other cases.

categoryAxis.visible Boolean(default: false)

The visibility of the axis.

categoryAxis.crosshair Object

The crosshair configuration options.

categoryAxis.crosshair.color String

The color of the crosshair.

categoryAxis.crosshair.width Number

The width of the crosshair.

categoryAxis.crosshair.opacity Number

The opacity of the crosshair.

categoryAxis.crosshair.dashType Number

The dash type of the crosshair.

categoryAxis.crosshair.visible Boolean(default: false)

The dash type of the crosshair.

categoryAxis.crosshair.tooltip Object

The crosshair tooltip configuration options.

categoryAxis.crosshair.tooltip.background String

The background color of the tooltip.

categoryAxis.crosshair.tooltip.border Object

The border configuration options.

categoryAxis.crosshair.tooltip.border.color String(default: "black")

The color of the border.

categoryAxis.crosshair.tooltip.border.width Number(default: 0)

The width of the border.

categoryAxis.crosshair.tooltip.color String

The text color of the tooltip.

categoryAxis.crosshair.tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

categoryAxis.crosshair.tooltip.format String

The tooltip format.

Example

//sets format of the tooltip
format: "C"

categoryAxis.crosshair.tooltip.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 }

categoryAxis.crosshair.tooltip.template String |Function

The tooltip template. Template variables:

  • value- the point value (either a number or an object)

Example

$("#sparkline").kendoSparkline({
     type: "area",
     data: [200, 450, 300, 125],
     categoryAxis: {
         crosshair: {
             tooltip: {
                 template: "|#= value #|"
             }
         }
     }
});

categoryAxis.crosshair.tooltip.visible Boolean(default: false)

A value indicating if the tooltip should be displayed.

categoryAxis.notes Object

The category axis notes configuration.

categoryAxis.notes.position String

The position of the category axis note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.

categoryAxis.notes.icon Object

The icon of the notes.

categoryAxis.notes.icon.background String

The background color of the notes icon.

Example - set the category axis notes icon background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.border Object

The border of the icon.

Example - set the category axis notes icon border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.border.color String

The border color of the icon.

Example - set the category axis notes icon border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.border.width Number

The border width of the icon.

Example - set the category axis notes icon border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.size Number

The size of the icon.

Example - set the category axis notes icon size

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.type String (default: "circle")

The icon shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.

Example - set the category axis notes icon shape

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.icon.visible Boolean (default: "true")

The icon visibility.

Example - set the category axis notes icon visibility

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label Object

The label of the notes.

categoryAxis.notes.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.border Object

The border of the label.

Example - set the category axis label border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

Example - set the category axis label border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the category axis label border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.color String

The text color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.font String (default: "12px Arial,Helvetica,sans-serif")

The font style of the label.

Example - set the chart series label font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.template String |Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the category value

Example - set the category axis notes label template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.visible Boolean (default: true)

If set to true the chart will display the category notes label. By default the category notes label are visible.

Example - hide the category axis notes label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.rotation Number (default: 0)

The rotation angle of the label. By default the label are not rotated.

Example - rotate the category axis notes label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.format String (default: "{0}")

The format used to display the notes label. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.

Example - set the category axis notes label format

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      label: {
        format: "Category slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.label.position String (default: "inside")

The position of the labels.

  • "inside" - the label is positioned inside of the icon.
  • "outside" - the label is positioned outside of the icon.

categoryAxis.notes.line Object

The line of the notes.

categoryAxis.notes.line.width Number

The line width of the notes.

Example - set the category axis notes line width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.line.color String

The line color of the notes.

Example - set the category axis notes color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.line.length Number

The line length of the notes.

Example - set the category axis notes color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

categoryAxis.notes.data Array

The items of the notes.

categoryAxis.notes.data.value Object

The value of the note.

categoryAxis.notes.data.position String

The position of the category axis note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.

categoryAxis.notes.data.icon Object

The icon of the note.

categoryAxis.notes.data.icon.background String

The background color of the note icon.

Example - set the category axis note icon background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.border Object

The border of the icon.

Example - set the category axis note icon border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.border.color String

The border color of the icon.

Example - set the category axis note icon border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.border.width Number

The border width of the icon.

Example - set the category axis note icon border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.size Number

The size of the icon.

Example - set the category axis note icon size

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.type String (default: "circle")

The icon shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.

Example - set the category axis note icon shape

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.icon.visible Boolean (default: "true")

The icon visibility.

Example - set the category axis note icon visibility

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label Object

The label of the note.

categoryAxis.notes.data.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis note label background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.border Object

The border of the label.

Example - set the category axis note label border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis note label border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

Example - set the category axis note label border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the category axis note label border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.color String

The text color of the note label. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis note label color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.font String (default: "12px Arial,Helvetica,sans-serif")

The font style of the note label.

Example - set the category axis note label font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.template String |Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the category value

Example - set the category axis note label template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.visible Boolean (default: true)

If set to true the chart will display the category notes label. By default the category notes label are visible.

Example - hide the category axis note label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.rotation Number (default: 0)

The rotation angle of the label. By default the label are not rotated.

Example - rotate the category axis note label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.format String (default: "{0}")

The format used to display the note label. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.

Example - set the category axis note label format

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "Category slot: {0}"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.text String

The label note text.

Example - set the category axis label note text

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.label.position String (default: "inside")

The position of the category axis note label.

  • "inside" - the label is positioned inside of the icon.
  • "outside" - the label is positioned outside of the icon.

categoryAxis.notes.data.line Object

The line of the note.

categoryAxis.notes.data.line.width Number

The line width of the note.

Example - set the category axis note line width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.line.color String

The line color of the note.

Example - set the category axis note color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
</script>

categoryAxis.notes.data.line.length Number

The line length of the note.

Example - set the category axis note color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  categoryAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
</script>

chartArea Object

The chart area configuration options. This is the entire visible area of the chart.

chartArea.background String(default: "white")

The background color of the chart area.

chartArea.opacity Number(default: 1)

The background opacity of the chart area.

chartArea.border Object

The border of the chart area.

chartArea.border.color String(default: "black")

The color of the border.

chartArea.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.

chartArea.border.width Number(default: 0)

The width of the border.

chartArea.height Number(default: 400)

The height of the chart area.

chartArea.margin Number |Object(default: 2)

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 }

chartArea.width Number(default: 600)

The width of the chart area.

data Array

The data for the default sparkline series.

Will be discarded if series are supplied.

Example

$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 5]
});

// Same as:
$("#sparkline").kendoSparkline([1, 2, 3, 5]);

dataSource Object

DataSource configuration or instance.

Example

$("#sparkline").kendoSparkline({
    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"
    }
});

$("#sparkline").kendoSparkline({
    dataSource: dataSource,
    series: [{
        field: "value"
    }],
    categoryAxis: {
        field: "year"
    }
});

autoBind Boolean(default: true)

Indicates whether the chart will call read on the data source initially.

Example

$("#sparkline").kendoSparkline({
    dataSource: chartDataSource,
    autoBind: false
});

// ...
chartDataSource.read();

plotArea Object

The plot area configuration options. This is the area containing the plotted series.

plotArea.background String(default: "white")

The background color of the plot area.

plotArea.opacity Number(default: 1)

The background opacity of the plot area.

plotArea.border Object

The border of the plot area.

plotArea.border.color String(default: "black")

The color of the border.

plotArea.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.

plotArea.border.width Number(default: 0)

The width of the border.

plotArea.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 }

pointWidth Number(default: 5)

The width to allocate for each data point.

renderAs String

Sets the preferred rendering engine. If it is not supported by the browser, the Sparkline will switch to the first available mode.

The supported values are:

  • "svg" - renders the widget as inline SVG document, if available
  • "canvas" - renders the widget as a Canvas element, if available.

Example - Render as Canvas, if supported

<span id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    renderAs: "canvas",
    type: "column",
    data: [1, 2, 3, 4]
});
</script>

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.

Info:Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.

series.type String(default: "line")

The type of the series. Available types:

  • area
  • column (synonym: bar)
  • line
  • pie
  • bullet

series.dashType String(default: "solid")

The series line dash type.

Applicable only to line series

"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.

series.data Array

Array of data items. The data item type can be either a:

  • Array of objects. Each point is bound to the specified series fields.
  • Array of numbers. Available for area, bar, column, pie and line series.

series.explodeField String

The data field containing a Boolean value that indicates if the sector is exploded.

Available for pie series

series.currentField String

The data field containing the current value.

Available for bullet and verticalBullet series.

series.targetField String

The data field containing the target value.

Available for bullet and verticalBullet series.

Available for pie series

series.field String

The data field containing the series value.

series.name String

The series name.

The name can also be a template which sets the name of the series when bound to grouped data source.

The fields which can be used in the template are:

  • 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.

series.highlight Object

Configures the appearance of highlighted points.

series.highlight.border Object

The border of highlighted points. The color is computed automatically from the base point color.

Applicable to pie series.

series.highlight.border.width Number

The width of the border.

series.highlight.border.color String

The border color.

series.highlight.border.opacity Number

The border opacity.

series.highlight.color String

The highlight color.

Available only for pie series

series.highlight.opacity Number

The opacity of the highlighted points.

Applicable to pie series.

series.highlight.visible Boolean

A value indicating if the series points should be highlighted.

series.aggregate String |Function (default: "max")

The aggregate function to apply 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.

The supported values are:

  • "avg" - the average of all values for the date period.
  • "count" - the number of values for the date period.
  • "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. Defaults to 0 if no data points are defined.
  • "sumOrNull" - the sum of all values for the date period. Defaults to null if no data points are defined.
  • "first" - the first value
  • function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.
  • object - (compound aggregate)Applicable to "candlestick" and ohlc "series". Specifies the aggregate for each data item field.

series.axis String(default: "primary")

The name of the value axis to use.

Applicable to area, bar, column and line series

series.border Object

The border of the points.

Applicable to bar, column and pie series

series.border.color String |Function

The color of the border. It defaults to the color of the current series.

series.border.dashType String |Function(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.

series.border.opacity Number |Function

The border opacity.

series.border.width Number |Function(default: 1)

The width of the border.

series.categoryField String

The data field containing the point category name.

Applicable to pie series.

series.color String |Function

The series base color. The supported values are:

  • CSS color string, including hex and rgb
  • function(point) - user-defined function that will be evaluated for each point. Returning undefined will assume the default series color.

Example

$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: "#ff0000"
     }]
});

Example

$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: function(point) {
            if (point.value > 300) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
         }
     }]
});

series.colorField String

The data field containing the point color.

Applicable for bar, column and pie series.

series.connectors Object

The label connectors options.

Applicable to pie series.

series.connectors.color String

The color of the connector line.

series.connectors.padding Number(default: 4)

The padding between the connector line and the label, and connector line and pie chart.

series.connectors.width Number(default: 1)

The width of the connector line.

series.gap Number(default: 1.5)

The distance between category clusters.

Applicable for bar and column series.

series.labels Object

Configures the series data labels.

series.labels.align String(default: "circle")

Defines the alignment of the labels.

Available for pie series.

"circle"

The labels are positioned in circle around the chart.

"column"

The labels are positioned in columns to the left and right of the chart.

series.labels.background String |Function

The background color of the labels.

series.labels.border Object

The border of the labels.

series.labels.border.color String |Function(default: "black")

The color of the border.

series.labels.border.dashType String |Function(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.

series.labels.border.width Number |Function(default: 0)

The width of the border.

series.labels.color String |Function

The text color of the labels.

series.labels.distance Number(default: 35)

The distance of the labels.

Available for pie series.

series.labels.font String |Function(default: "12px Arial,Helvetica,sans-serif")

The font style of the labels.

series.labels.format String |Function

The format of the labels.

Example

//sets format of the labels
format: "C"

series.labels.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 }

series.labels.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 }

series.labels.position String |Function(default: "above")

Defines the position of the labels.

"above"

The label is positioned at the top of the marker.

Applicable for area and line series.

"center"

The label is positioned at the point center.

Applicable for bar, column, pie series.

"insideEnd"

The label is positioned inside, near the end of the point.

Applicable for bar, column, pie series.

"insideBase"

The label is positioned inside, near the base of the bar.

Applicable for bar and column series.

"outsideEnd"

The label is positioned outside, near the end of the bar.

Applicable for bar, column, pie series. Not applicable for stacked series.

"right"

The label is positioned to the right of the marker.

Applicable for area and line series.

"below"

The label is positioned at the bottom of the marker.

Applicable for area and line series.

"left"

The label is positioned to the left of the marker.

Applicable for area and line series.

series.labels.template String | Function

The template which renders the chart series label.

The fields which can be used in the template are:

  • category - the category name. Available for area, bar, column, bubble, donut, line and pie series.
  • dataItem - the original data item used to construct the point. Will be null if binding to array.
  • percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
  • series - the data series
  • value - the point value. Can be a number or object containing each bound field.

series.labels.visible Boolean |Function(default: false)

The visibility of the labels.

series.line String | Object

Line options.

Applicable to area series.

series.line.color String

The line color.

series.line.opacity Number(default: 1)

The line opacity.

series.line.width String(default: 0.5)

The line width.

series.line.style String(default: "normal")

The supported values are:

  • "normal" - The values will be connected with straight line.
  • "step" - The values will be connected with a line with right angle.
  • "smooth" - The values will be connected with a smooth line.

The default value is "normal".

The style option is supported when series.type is set to "area".

series.markers Object

Marker options.

Applicable to area and line series

series.markers.background String |Function

The background color of the current series markers.

series.markers.border Object |Function

The border of the markers.

series.markers.border.color String |Function(default: "black")

The color of the border.

series.markers.border.width Number |Function(default: 0)

The width of the border.

series.markers.size Number |Function(default: 6)

The marker size.

series.markers.type String |Function(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.

series.markers.visible Boolean |Function(default: false)

The markers visibility.

series.markers.rotation Number |Function

The rotation angle of the markers.

series.missingValues String

The behavior for handling missing values. The supported values are:

  • "gap" - the plot stops before the missing point and continues after it.
  • "interpolate" - the value is interpolated from neighboring points.
  • "zero" - the value is assumed to be zero.

The default value is "interpolate", except for "area" and stacked series which default to "zero".

The missingValues option is supported when series.type is set to "area", "line", "scatterLine", "radarLine", "radarArea", "polarLine" or "polarArea".

Example - set the missing values behavior

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "line",
    missingValues: "gap",
    data: [1, 3, null, 4, 5]
  }]
});
</script>

series.style String (default: "normal")

The supported values are:

  • "normal" - The values will be connected with straight line.
  • "step" - The values will be connected with a line with right angle.
  • "smooth" - The values will be connected with a smooth line.

The default value is "normal".

The style option is supported when series.type is set to "line".

series.negativeColor String

Color to use for bars with negative values.

Applicable only to bar and column series.

series.opacity Number

The series opacity.

series.overlay Object

The effects overlay.

series.overlay.gradient String

The gradient name.

Available options:

**glass(bar and column series) *roundedBevel(pie series) *sharpBevel(pie series) *none*

series.padding Number

The padding around the chart (equal on all sides).

Available for pie series.

series.size Number

The size (or radius) of the series in pixels. If not specified, the available space is split evenly between the series.

Available for only.

series.startAngle Number(default: 90)

The start angle of the first segment.

Available for pie series.

series.spacing Number(default: 0.4)

Space between points as proportion of the point width.

Available for bar and column series.

series.stack Boolean |String |Object (default: false)

A Boolean value indicating if the series should be stacked. A string value is interpreted as series.stack.group.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

Stack settings of the first series are applied to the rest of the series.

Example - configure stack series

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  series: [
    { stack: true, data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
</script>

series.stack.type String (default: "normal")

The type of stack to plot. The following types are supported:

  • "normal" - the value of the stack is the sum of all points in the category (or group)
  • "100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.

Example - configure 100% stacked series

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  series: [
    { stack: { type: "100%" }, data: [ 1, 2 ] },
    { data: [ 10, 20 ] }
  ]
});
</script>

series.stack.group String

Indicates that the series should be stacked in a group with the specified name.

The group option is supported when series.type is set to "bar" or "column".

Example - configure stack groups

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    type: "column"
  },
  series: [
    { stack: { group: "a" }, data: [ 1, 2 ] },
    { stack: { group: "a" }, data: [ 3, 4 ] },
    { stack: { group: "b" }, data: [ -1, -2 ] },
    { stack: { group: "b" }, data: [ -3, -4 ] }
  ]
});
</script>

series.tooltip Object

The data point tooltip configuration options.

series.tooltip.background String

The background color of the tooltip. The default is determined from the series color.

series.tooltip.border Object

The border configuration options.

series.tooltip.border.color String(default: "black")

The color of the border.

series.tooltip.border.width Number(default: 0)

The width of the border.

series.tooltip.color String

The text color of the tooltip. The default is the same as the series labels color.

series.tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

series.tooltip.format String

The tooltip format. Format variables depend on the series type:

  • Area, bar, column, line and pie
    • 0- value

Example

//sets format of the tooltip
format: "{0:C}--{1:C}"

series.tooltip.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 }

series.tooltip.template String |Function

The tooltip template. Template variables:

  • value- the point value (either a number or an object)
  • 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

$("#sparkline").kendoSparkline({
     series: [{
         type: "area",
         data: [200, 450, 300, 125],
         tooltip: {
             visible: true,
             template: "#= value #"
         }
     }]
});

series.tooltip.visible Boolean(default: true)

A value indicating if the tooltip should be displayed.

series.width Number(default: 0.5)

The line width.

Available for line series

series.target Object

The target of the bullet chart.

series.target.line Object

The target line.

series.target.line.width Object |Function

The width of the line.

series.target.color String |Function

The target color.

series.target.border Object |Function

The border of the target.

series.target.border.color String |Function(default: "black")

The color of the border.

series.target.border.dashType String |Function(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.

series.target.border.width Number(default: 0)

The width of the border.

series.notes Object

The series notes configuration.

series.notes.icon Object

The icon of the notes.

series.notes.position String

The position of the series note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.

series.notes.icon.background String

The background color of the notes icon.

series.notes.icon.border Object

The border of the icon.

series.notes.icon.border.color String

The border color of the icon.

series.notes.icon.border.width Number

The border width of the icon.

series.notes.icon.size Number

The size of the icon.

series.notes.icon.type String (default: "circle")

The icon shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.
  • "cross" - the marker shape is cross.

series.notes.icon.visible Boolean (default: "true")

The icon visibility.

series.notes.label Object

The label of the notes.

series.notes.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

series.notes.label.border Object

The border of the label.

series.notes.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

series.notes.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

series.notes.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

series.notes.label.color String

The text color of the label. Accepts a valid CSS color string, including hex and rgb.

series.notes.label.font String (default: "12px Arial,Helvetica,sans-serif")

The font style of the label.

series.notes.label.template String |Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the point value

series.notes.label.visible Boolean (default: true)

If set to true the chart will display the series notes label. By default the series notes label are visible.

series.notes.label.rotation Number (default: 0)

The rotation angle of the label. By default the label are not rotated.

series.notes.label.format String (default: "{0}")

The format used to display the notes label. Uses kendo.format. Contains one placeholder ("{0}") which represents the axis value.

series.notes.label.position String (default: "inside")

The position of the labels.

  • "inside" - the label is positioned inside of the icon.
  • "outside" - the label is positioned outside of the icon.

series.notes.line Object

The line of the notes.

series.notes.line.width Number

The line width of the notes.

series.notes.line.color String

The line color of the notes.

series.notes.line.length Number

The length of the connecting lines in pixels.

series.zIndex Number

An optional Z-index that can be used to change the default stacking order of series.

The series with the highest Z-index will be placed on top.

Series with no Z-index will use the default stacking order based on series type. For example line series will be on top with bar and area following below.

Example - Change the series stacking order

<div id="sparkline"></div>
<script>
    $("#sparkline").kendoSparkline({
      series: [{
        type: "line",
        zIndex: 1,
        color: "grey",
        data: [1, 2, 1, 1, 2, 1]
      }, {
        type: "line",
        color: "blue",
        zIndex: 3,
        data: [2, 2, 2, 2, 2, 2]
      }, {
        type: "area",
        color: "red",
        zIndex: 2,
        data: [0, 2, 0, 0, 2, 0]
      }]
    });
</script>

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.

seriesDefaults.area Object

The area configuration options. The default options for all area series. For more details see the series options.

seriesDefaults.bar Object

The default options for all bar series. For more details see the series options.

seriesDefaults.border Object

The border of the series.

seriesDefaults.border.color String(default: "black")

The color of the border.

seriesDefaults.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.

seriesDefaults.border.width Number(default: 0)

The width of the border.

seriesDefaults.column Object

The column configuration options. The default options for all column series. For more details see the series options.

seriesDefaults.gap Number(default: 1.5)

The distance between category clusters.

seriesDefaults.labels Object

Configures the series data labels.

seriesDefaults.labels.background String

The background color of the labels. Any valid CSS color string will work here, including hex and rgb.

seriesDefaults.labels.border Object

The border of the labels.

seriesDefaults.labels.border.color String(default: "black")

The color of the border.

seriesDefaults.labels.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.

seriesDefaults.labels.border.width Number(default: 0)

The width of the border.

seriesDefaults.labels.color String

The text color of the labels. Any valid CSS color string will work here, including hex and rgb.

seriesDefaults.labels.font String(default: "12px Arial,Helvetica,sans-serif")

The font style of the labels. labels

seriesDefaults.labels.format String

The format of the labels.

Example

//sets format of the labels
format: "C"

seriesDefaults.labels.margin Number |Object(default: 0)

The margin of the labels.

seriesDefaults.labels.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 }

seriesDefaults.labels.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.

seriesDefaults.labels.visible Boolean(default: false)

The visibility of the labels.

seriesDefaults.line Object

The line configuration options. The default options for all line series. For more details see the series options.

seriesDefaults.overlay Object

The effects overlay.

seriesDefaults.pie Object

The pie configuration options. The default options for all pie series. For more details see the series options.

seriesDefaults.spacing Number(default: 0.4)

Space between bars.

seriesDefaults.stack Boolean |Object (default: false)

A Boolean value indicating if the series should be stacked.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

Example - configure stack series

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    stack: true
  },
  series: [
    { data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
</script>

seriesDefaults.stack.type String (default: "normal")

The type of stack to plot. The following types are supported:

  • "normal" - the value of the stack is the sum of all points in the category (or group)
  • "100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.

Example - configure 100% stacked series

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    stack: { type: "100%" }
  },
  series: [
    { data: [ 1, 2 ] },
    { data: [ 10, 20 ] }
  ]
});
</script>

seriesDefaults.type String

The type of the series. Available types:

  • area
  • column (synonym: bar)
  • line
  • pie
  • bullet

seriesDefaults.tooltip Object

The data point tooltip configuration options.

seriesDefaults.tooltip.background String

The background color of the tooltip. The default is determined from the series color.

seriesDefaults.tooltip.border Object

The border configuration options.

seriesDefaults.tooltip.border.color String(default: "black")

The color of the border.

seriesDefaults.tooltip.border.width Number(default: 0)

The width of the border.

seriesDefaults.tooltip.color String

The text color of the tooltip. The default is the same as the series labels color.

seriesDefaults.tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

seriesDefaults.tooltip.format String

The tooltip format.

Example

//sets format of the tooltip
format: "C"

seriesDefaults.tooltip.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 }

seriesDefaults.tooltip.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

$("#sparkline").kendoSparkline({
    data: [200, 450, 300, 125],
     seriesDefaults: {
         tooltip: {
             visible: true,
             template: "#= value #"
         }
     }
});

seriesDefaults.tooltip.visible Boolean(default: false)

A value indicating if the tooltip should be displayed.

theme String

The sparkline theme. This can be either a built-in theme or "sass". When set to "sass" the sparkline will read the variables from the Sass-based themes.

The supported values are:

  • "sass" - special value, see notes
  • "black"
  • "blueopal"
  • "bootstrap"
  • "default"
  • "highcontrast"
  • "metro"
  • "metroblack"
  • "moonlight"
  • "silver"
  • "uniform"

tooltip Object

The data point tooltip configuration options.

tooltip.background String

The background color of the tooltip. The default is determined from the series color.

tooltip.border Object

The border configuration options.

tooltip.border.color String(default: "black")

The color of the border.

tooltip.border.width Number(default: 0)

The width of the border.

tooltip.color String

The text color of the tooltip. The default is the same as the series labels color.

tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

tooltip.format String

The tooltip format.

Example

//sets format of the tooltip
format: "C"

tooltip.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 }

tooltip.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

$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     tooltip: {
         template: "#= value #"
     }
});

tooltip.visible Boolean(default: true)

A value indicating if the tooltip should be displayed.

tooltip.shared Boolean(default: false)

A value indicating if the tooltip should be shared.

tooltip.sharedTemplate String

The shared tooltip template. Template variables:

  • points- the category points
  • category- the category name

Example

$("#chart").kendoChart({
     title: {
         text: "Internet Users"
     },
     series: [{
         name: "United States",
         data: [67.96, 68.93, 75, 74, 78]
     }, {
         name: "World",
         data: [15.7, 16.7, 20, 23.5, 26.6]
     }],
     categoryAxis: {
         categories: [2005, 2006, 2007, 2008, 2009]
     },
     tooltip: {
         visible: true,
         shared: true,
         sharedTemplate:
            "#= category # </br>" +
            "# for (var i = 0; i < points.length; i++) { #" +
                "#= points[i].series.name #: #= points[i].value # </br>" +
            "# } #"
     }
});

transitions Boolean(default: false)

A value indicating if transition animations should be played.

type String(default: "line")

The default series type.

Example

$("#sparkline").kendoSparkline({
    type: "bar",
    data: [1, 2, 3, 5]
});

valueAxis Array

The value axis configuration options.

valueAxis.axisCrossingValue Object | Date | Array

Value at which the category axis crosses this axis. (Only for object)

Value indicies at which the category axes cross the value axis. (Only for array)

Date at which the category axis crosses this axis. (Only for date)

valueAxis.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.

valueAxis.labels Object

Configures the axis labels.

valueAxis.labels.background String

The background color of the labels. Any valid CSS color string will work here, including hex and rgb

valueAxis.labels.border Object

The border of the labels.

valueAxis.labels.border.color String(default: "black")

The color of the border. Any valid CSS color string will work here, including hex and rgb.

valueAxis.labels.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.

valueAxis.labels.border.width Number(default: 0)

The width of the border.

valueAxis.labels.color String

The text color of the labels. Any valid CSS color string will work here, including hex and rgb.

valueAxis.labels.font String(default: "12px Arial,Helvetica,sans-serif")

The font style of the labels.

valueAxis.labels.format String

The format of the labels.

valueAxis.labels.margin Number |Object(default: 0)

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 0px (by default)
margin: { top: 1, left: 1 }

valueAxis.labels.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.

valueAxis.labels.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 }

valueAxis.labels.rotation Number(default: 0)

The rotation angle of the labels.

valueAxis.labels.skip Number(default: 1)

Number of labels to skip. Skips rendering the first n labels.

valueAxis.labels.step Number(default: 1)

Label rendering step. Every n-th label is rendered where n is the step

valueAxis.labels.template String | Function

The label template. Template variables:

  • value- the value

valueAxis.labels.visible Boolean(default: true)

The visibility of the labels.

valueAxis.line Object

Configures the axis line. This will also affect the major and minor ticks, but not the grid lines.

valueAxis.line.color String(default: "black")

The color of the line. This will also effect the major and minor ticks, but not the grid lines.

valueAxis.line.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.

valueAxis.line.visible Boolean(default: true)

The visibility of the line.

valueAxis.line.width Number(default: 1)

The width of the line. This will also effect the major and minor ticks, but not the grid lines.

valueAxis.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.

valueAxis.majorGridLines.color String(default: "black")

The color of the lines.

valueAxis.majorGridLines.visible Boolean(default: false)

The visibility of the lines.

valueAxis.majorGridLines.width Number(default: 1)

The width of the lines.

valueAxis.majorGridLines.step Number (default: 1)

The step of the value axis major grid lines.

valueAxis.majorGridLines.skip Number (default: 0)

The skip of the value axis major grid lines.

valueAxis.majorTicks Object

The major ticks of the axis.

valueAxis.majorTicks.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.

valueAxis.majorTicks.visible Boolean(default: true)

The visibility of the major ticks.

valueAxis.majorTicks.color String (default: "black")

The color of the value axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.

valueAxis.majorTicks.width Number (default: 1)

The width of the major ticks in pixels.

valueAxis.majorTicks.step Number (default: 1)

The step of the value axis major ticks.

valueAxis.majorTicks.skip Number (default: 0)

The skip of the value axis major ticks.

valueAxis.majorUnit Number

The interval between major divisions.

valueAxis.max Number(default: 1)

The maximum value of the axis. This is often used in combination with theminconfiguration option.

valueAxis.min Number(default: 0)

The minimum value of the axis. This is often used in combination with themaxconfiguration option.

valueAxis.minorGridLines Object

Configures the minor grid lines. These are the lines that are an extension of the minor ticks through the

valueAxis.minorGridLines.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 totrue.

valueAxis.minorGridLines.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 totrue.

valueAxis.minorGridLines.visible Boolean(default: false)

The visibility of the lines.

valueAxis.minorGridLines.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 totrue.

valueAxis.minorGridLines.step Number (default: 1)

The step of the value axis minor grid lines.

valueAxis.minorGridLines.skip Number (default: 0)

The skip of the value axis minor grid lines.

valueAxis.minorTicks Object

The minor ticks of the axis.

valueAxis.minorTicks.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.

valueAxis.minorTicks.color String (default: "black")

The color of the value axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.

valueAxis.minorTicks.width Number (default: 1)

The width of the minor ticks in pixels.

valueAxis.minorTicks.visible Boolean(default: false)

The visibility of the minor ticks.

valueAxis.minorTicks.step Number (default: 1)

The step of the value axis minor ticks.

valueAxis.minorTicks.skip Number (default: 0)

The skip of the value axis minor ticks.

valueAxis.minorUnit Number

The interval between minor divisions. It defaults to 1/5th of the majorUnit.

valueAxis.name Object(default: "primary")

The unique axis name.

valueAxis.narrowRange Boolean(default: true)

Prevents the automatic axis range from snapping to 0.

valueAxis.plotBands Array

The plot bands of the value axis.

valueAxis.plotBands.from Number

The start position of the plot band in axis units.

valueAxis.plotBands.to Number

The end position of the plot band in axis units.

valueAxis.plotBands.color String

The color of the plot band.

valueAxis.plotBands.opacity Number

The opacity of the plot band.

valueAxis.reverse Boolean(default: false)

Reverses the axis direction - values increase from right to left and from top to bottom.

valueAxis.title Object

The title of the value axis.

valueAxis.title.background String

The background color of the title. Any valid CSS color string will work here, including hex and rgb.

valueAxis.title.border Object

The border of the title.

valueAxis.title.border.color String(default: "black")

The color of the border.

valueAxis.title.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.

valueAxis.title.border.width Number(default: 0)

The width of the border.

valueAxis.title.color String

The text color of the title. Any valid CSS color string will work here, including hex and rgb.

valueAxis.title.font String(default: "16px Arial,Helvetica,sans-serif")

The font style of the title.

valueAxis.title.margin Number | Object(default: 5)

The margin of the title.

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 0px (by default)
margin: { top: 1, left: 1 }

valueAxis.title.padding Number | Object(default: 0)

The padding of the title.

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 }

valueAxis.title.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.

valueAxis.title.rotation Number(default: 0)

The rotation angle of the title.

valueAxis.title.text String

The text of the title.

valueAxis.title.visible Boolean(default: true)

The visibility of the title.

valueAxis.visible Boolean(default: false)

The visibility of the axis.

valueAxis.crosshair Object

The crosshair configuration options.

valueAxis.crosshair.color String

The color of the crosshair.

valueAxis.crosshair.width Number

The width of the crosshair.

valueAxis.crosshair.opacity Number

The opacity of the crosshair.

valueAxis.crosshair.dashType Number

The dash type of the crosshair.

valueAxis.crosshair.visible Boolean(default: true)

The dash type of the crosshair.

valueAxis.crosshair.tooltip Object

The crosshair tooltip configuration options.

valueAxis.crosshair.tooltip.background String

The background color of the tooltip.

valueAxis.crosshair.tooltip.border Object

The border configuration options.

valueAxis.crosshair.tooltip.border.color String(default: "black")

The color of the border.

valueAxis.crosshair.tooltip.border.width Number(default: 0)

The width of the border.

valueAxis.crosshair.tooltip.color String

The text color of the tooltip.

valueAxis.crosshair.tooltip.font String(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

valueAxis.crosshair.tooltip.format String

The tooltip format.

Example

//sets format of the tooltip
format: "C"

valueAxis.crosshair.tooltip.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 }

valueAxis.crosshair.tooltip.template String |Function

The tooltip template. Template variables:

  • value- the point value (either a number or an object)

Example

// chart initialization
$("#sparkline").kendoSparkline({
     data: [200, 450, 300, 125],
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});

valueAxis.crosshair.tooltip.visible Boolean(default: false)

A value indicating if the tooltip should be displayed.

valueAxis.notes Object

The value axis notes configuration.

valueAxis.notes.position String

The position of the value axis note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.

valueAxis.notes.icon Object

The icon of the notes.

valueAxis.notes.icon.background String

The background color of the notes icon.

Example - set the value axis notes icon background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.border Object

The border of the icon.

Example - set the value axis notes icon border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.border.color String

The border color of the icon.

Example - set the value axis notes icon border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.border.width Number

The border width of the icon.

Example - set the value axis notes icon border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        border: {
          width: 2,
          color: "red"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.size Number

The size of the icon.

Example - set the value axis notes icon size

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        size: 30
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.type String (default: "circle")

The icon shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.

Example - set the value axis notes icon shape

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        shape: "triangle"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.icon.visible Boolean (default: "true")

The icon visibility.

Example - set the value axis notes icon visibility

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      icon: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label Object

The label of the notes.

valueAxis.notes.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis label background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        background: "red"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.border Object

The border of the label.

Example - set the value axis label border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis label border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          color: "green"
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

Example - set the value axis label border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          dashType: "dashDot",
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the value axis label border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        border: {
          width: 1
        }
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.color String

The text color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis label color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.font String (default: "12px Arial,Helvetica,sans-serif")

The font style of the label.

Example - set the chart series label font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        font: "20px sans-serif"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.template String |Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the value value

Example - set the value axis notes label template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        template: "Year: #: value #"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.visible Boolean (default: true)

If set to true the chart will display the value axis notes label. By default the value axis notes label are visible.

Example - hide the value axis notes label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        visible: false
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.rotation Number (default: 0)

The rotation angle of the label. By default the label are not rotated.

Example - rotate the value axis notes label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        rotation: 90
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.format String (default: "{0}")

The format used to display the notes label. Uses kendo.format. Contains one placeholder ("{0}") which represents the axis value.

Example - set the value axis notes label format

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      label: {
        format: "value slot: {0}"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.label.position String (default: "inside")

The position of the labels.

  • "inside" - the label is positioned inside of the icon.
  • "outside" - the label is positioned outside of the icon.

valueAxis.notes.line Object

The line of the notes.

valueAxis.notes.line.width Number

The line width of the notes.

Example - set the value axis notes line width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        width: 4
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.line.color String

The line color of the notes.

Example - set the value axis notes color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        color: "#aa00bb"
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.line.length Number

The line length of the notes.

Example - set the value axis notes color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      line: {
        length: 20
      },
      data: [{ value: 1 }]
    }
  }
});
</script>

valueAxis.notes.data Array

The items of the notes.

valueAxis.notes.data.value Object

The value of the note.

valueAxis.notes.data.position String

The position of the value axis note.

  • "top" - The note is positioned on the top.
  • "bottom" - The note is positioned on the bottom.
  • "left" - The note is positioned on the left.
  • "right" - The note is positioned on the right.

valueAxis.notes.data.icon Object

The icon of the note.

valueAxis.notes.data.icon.background String

The background color of the note icon.

Example - set the value axis note icon background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          background: "red"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.border Object

The border of the icon.

Example - set the value axis note icon border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.border.color String

The border color of the icon.

Example - set the value axis note icon border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.border.width Number

The border width of the icon.

Example - set the value axis note icon border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          border: {
            width: 2,
            color: "red"
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.size Number

The size of the icon.

Example - set the value axis note icon size

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          size: 30
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.type String (default: "circle")

The icon shape.

The supported values are:

  • "circle" - the marker shape is circle.
  • "square" - the marker shape is square.
  • "triangle" - the marker shape is triangle.

Example - set the value axis note icon shape

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          shape: "triangle"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.icon.visible Boolean (default: "true")

The icon visibility.

Example - set the value axis note icon visibility

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        icon: {
          visible: false
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label Object

The label of the note.

valueAxis.notes.data.label.background String

The background color of the label. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis note label background

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notesdata {
      data: [{
        value: 1,
        label: {
          background: "red"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.border Object

The border of the label.

Example - set the value axis note label border

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green",
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.border.color String (default: "black")

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis note label border color

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            color: "green"
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.border.dashType String (default: "solid")

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

Example - set the value axis note label border dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            dashType: "dashDot",
            width: 1
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.border.width Number (default: 0)

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the value axis note label border width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          border: {
            width: 1
          }
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.color String

The text color of the note label. Accepts a valid CSS color string, including hex and rgb.

Example - set the value axis note label color as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.font String (default: "12px Arial,Helvetica,sans-serif")

The font style of the note label.

Example - set the value axis note label font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          font: "20px sans-serif"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.template String |Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the axis value

Example - set the value axis note label template as a string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          template: "Year: #: value #"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.visible Boolean (default: true)

If set to true the chart will display the value axis notes label. By default the value axis notes label are visible.

Example - hide the value axis note label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          visible: false
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.rotation Number (default: 0)

The rotation angle of the label. By default the label are not rotated.

Example - rotate the value axis note label

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          rotation: 90
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.format String (default: "{0}")

The format used to display the note label. Uses kendo.format. Contains one placeholder ("{0}") which represents the axis value.

Example - set the value axis note label format

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          format: "value slot: {0}"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.text String

The label note text.

Example - set the value axis label note text

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        label: {
          text: "A"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.label.position String (default: "inside")

The position of the value axis note label.

  • "inside" - the label is positioned inside of the icon.
  • "outside" - the label is positioned outside of the icon.

valueAxis.notes.data.line Object

The line of the note.

valueAxis.notes.data.line.width Number

The line width of the note.

Example - set the value axis note line width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          width: 4
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.line.color String

The line color of the note.

Example - set the value axis note color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          color: "#aa00bb"
        }
      }]
    }
  }
});
</script>

valueAxis.notes.data.line.length Number

The line length of the note.

Example - set the value axis note color width

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2, 3]
  }],
  valueAxis: {
    notes: {
      data: [{
        value: 1,
        line: {
          length: 20
        }
      }]
    }
  }
});
</script>

Methods

destroy

Prepares the Sparkline for safe removal from the DOM.

Detaches event handlers and removes data entries in order to avoid memory leaks.

exportImage

Exports the chart as an image.

Inherited from Chart.exportImage

Parameters

options Object (optional)

Parameters for the exported image.

options.width String

The width of the exported image. Defaults to the chart width.

options.height String

The height of the exported image. Defaults to the chart height.

Returns

Promise A promise that will be resolved with a PNG image encoded as a Data URI.

exportPDF

Exports the chart as a PDF file.

Inherited from Chart.exportPDF

Parameters

options kendo.drawing.PDFOptions (optional)

Parameters for the exported PDF file.

Returns

Promise A promise that will be resolved with a PDF file encoded as a Data URI.

exportSVG

Exports the chart as an SVG document.

Inherited from Chart.exportSVG

Parameters

options Object (optional)

Export options.

options.raw Boolean (default: false)

Resolves the promise with the raw SVG document without the Data URI prefix.

Returns

Promise A promise that will be resolved with a SVG document encoded as a Data URI.

refresh

Reloads the data and repaints the chart.

setDataSource

Sets the dataSource of an existing Chart and rebinds it.

Parameters

dataSource kendo.data.DataSource

setOptions

Sets the widget options. Changes are cumulative.

Parameters

options Object

The chart settings to update.

Example - change the chart theme

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  theme: "black",
  data: [1, 2, 3]
});

var sparkline = $("#sparkline").data("kendoSparkline");
sparkline.setOptions({ theme: "uniform" });
</script>

svg

Returns the SVG representation of the chart. The returned string is a self-contained SVG document that can be used as is or converted to other formats using tools like Inkscape and ImageMagick. Both programs provide command-line interface suitable for server-side processing.

This method is obsoleted by exportSVG, but will remain fully functional.

Returns

String the SVG representation of the sparkline.

Example

<span id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    data: [1, 2, 3, 4]
});
var sparkline = $("#sparkline").data("kendoSparkline");
var svg = sparkline.svg();
console.log(svg); // displays the SVG string
</script>

imageDataURL

Returns a PNG image of the sparkline encoded as a Data URL.

This method is deprecated and replaced by exportImage.

Returns

String A data URL with image/png MIME type. Will be null if the browser does not support the canvas element.

Example - show a snapshot of the Sparkline

<span id="sparkline"></div>
<a download="export.png" id="export" class="k-button">Export PNG</a>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    data: [1, 2, 3, 4]
});

$("#export").on("click", function() {
  var sparkline = $("#sparkline").data("kendoSparkline");
  var imageDataURL = sparkline.imageDataURL();

  if (navigator.msSaveBlob) {
    var blob = toBlob(imageDataURL, "image/png");
    navigator.msSaveBlob(blob, this.getAttribute("download"));
  } else {
    this.href = imageDataURL;
  }
});

// See: http://goo.gl/qlg5dd
function toBlob(base64, type) {
  var rawData = base64.substring(base64.indexOf("base64,") + 7);
  var data = atob(rawData);
  var arr = new Uint8Array(data.length);

  for (var i = 0; i < data.length; ++i) {
    arr[i] = data.charCodeAt(i);
  }

  return new Blob([ arr.buffer ], { type: type });
}
</script>

Events

axisLabelClick

Fires when an axis label is clicked.

Example

function onAxisLabelClick(e) {
    alert("Clicked " + e.axis.type + " axis label with value: " + e.value);
}

Event Data

e.axis Object

The axis that the label belongs to.

e.value Object

The label value or category name.

e.text Object

The label text.

e.index Object

The label sequential index or category index.

e.dataItem Object

The original data item used to generate the label. Applicable only for data bound category axis.

e.element Object

The DOM element of the label.

dataBound

Fires when the sparkline has received data from the data source and is about to render it.

Example

function onDataBound(e) {
    // Series data is now available
}

dragStart

Fires when the user has used the mouse or a swipe gesture to drag the sparkline.

The drag operation can be aborted by calling e.preventDefault().

Event Data

e.axisRanges Object

A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent Object

The original user event that triggered the drag action.

drag

Fires as long as the user is dragging the sparkline using the mouse or swipe gestures.

Event Data

e.axisRanges Object

A hastable containing the suggested current range (min and max values) of named axes. The axis name is used as a key.

Note that the axis ranges are not updated automatically. You need to call set_options with either the suggested or custom min/max values for them to take effect.

Example

$("#sparkline").kendoSparkline({
    valueAxis: {
        name: "price"
    },
    drag: onDrag
    ...
}

function onDrag(e) {
    var minPrice = e.axisRanges.price.min;
}
e.originalEvent Object

The original user event that triggered the drag action.

dragEnd

Fires when the user stops dragging the sparkline.

Event Data

e.axisRanges Object

A hastable containing the final range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent Object

The original user event that triggered the drag action.

plotAreaClick

Fires when plot area is clicked.

Example

function onPlotAreaClick(e) {
    alert("Clicked X axis value: " + e.x);
}

Event Data

e.value Object

The data point value. Available only for categorical charts (bar, line, area and similar).

e.category Object

The data point category. Available only for categorical charts (bar, line, area and similar).

e.element Object

The DOM element of the plot area.

e.x Object

The X axis value or array of values for multi-axis charts.

e.y Object

The X axis value or array of values for multi-axis charts.

seriesClick

Fires when chart series are clicked.

Example

function onSeriesClick(e) {
    alert("Clicked value: " + e.value);
}

Event Data

e.value Object

The data point value.

e.category Object

The data point category

e.series Object

The clicked series.

e.series.type String

The series type

e.series.name String

The series name

e.series.data Array

The series data points

e.dataItem Object

The original data item (when binding to dataSource).

e.element Object

The DOM element of the data point.

e.percentage Object

The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.

seriesHover

Fires when chart series are hovered.

Example

function onSeriesHover(e) {
    alert("Hovered value: " + e.value);
}

Event Data

e.value Object

The data point value.

e.category Object

The data point category

e.series Object

The clicked series.

e.series.type String

The series type

e.series.name String

The series name

e.series.data Array

The series data points

e.dataItem Object

The original data item (when binding to dataSource).

e.element Object

The DOM element of the data point.

e.percentage Object

The point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.

zoomStart

Fires when the user has used the mousewheel to zoom the chart.

The zoom operation can be aborted by calling e.preventDefault().

Event Data

e.axisRanges Object

A hastable containing the initial range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent Object

The original user event that triggered the zoom action.

zoom

Fires as long as the user is zooming the chart using the mousewheel.

Event Data

e.axisRanges Object

A hastable containing the suggested current range (min and max values) of named axes. The axis name is used as a key.

Note that the axis ranges are not updated automatically. You need to call set_options with either the suggested or custom min/max values for them to take effect.

Example

$("#sparkline").kendoSparkline({
    valueAxis: {
        name: "price"
    },
    zoom: onZoom
    ...
}

function onZoom(e) {
    var minPrice = e.axisRanges.price.min;
}
e.delta Number

A number that indicates the zoom amount and direction.

A negative delta indicates "zoom in", while a positive "zoom out".

e.originalEvent Object

The original user event that triggered the zoom action.

This event can be used to prevent the default mousewheel action (scroll).

Example

function onZoom(e) {
    // Prevent window scroll
    e.originalEvent.preventDefault();
}

zoomEnd

Fires when the user stops zooming the chart.

Event Data

e.axisRanges Object

A hastable containing the final range (min and max values) of named axes. The axis name is used as a key.

e.originalEvent Object

The original user event that triggered the zoom action.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy