axisDefaults

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    categories: [ "2012", "2013"]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.background

String

The background color of the axis.

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

axisDefaults.color

String

The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb.

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

axisDefaults.crosshair

Object

The crosshair configuration options.

The crosshair is displayed when the axisDefaults.crosshair.visible option is set to true.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    crosshair: {
      color: "green",
      width: 2,
      zIndex:1,
      visible: true
    }
  },
  series: [
    { type: "column", data: [[1, 2], [3, 4], [4, 5]] }
  ]
});
</script>

axisDefaults.labels

Object

The axis labels configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    labels: {
      font: "16px Arial",
      color: "blue"
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.line

Object

The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.

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

axisDefaults.majorGridLines

Object

The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    majorGridLines: {
      color: "blue",
      width: 2,
      dashType: "dash"
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.majorTicks

Object

The configuration of the axis major ticks.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    majorTicks: {
      color: "green",
      size: 8,
      width: 2
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.minorGridLines

Object

The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the chart.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    minorGridLines: {
      color: "lightgray",
      dashType: "dot",
      visible: true
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.minorTicks

Object

The configuration of the axis minor ticks.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    minorTicks: {
      color: "red",
      size: 6,
      visible: true
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.narrowRange

Boolean

If set to true the chart will prevent the axis range from snapping to 0. Setting it to false will force the axis range to snap to 0.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    narrowRange: true
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.pane

String

The name of the pane that the axis should be rendered in. The axis will be rendered in the first (default) pane if not set.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    pane: "topPane"
  },
  panes: [
    { name: "topPane" },
    { name: "bottomPane" }
  ],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.plotBands

Array

The plot bands of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    plotBands: [{
      from: 1,
      to: 2,
      color: "lightblue",
      opacity: 0.5
    }]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.reverse

Boolean

If set to true the axis direction will be reversed. By default categories are listed from left to right and from bottom to top.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    reverse: true
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.startAngle

Number

The angle (degrees) of the first category on the axis.

Angles increase clockwise and zero is to the left. Negative values are acceptable.

Default: 90

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    startAngle: 45
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.title

Object

The title configuration of the axis.

The axisDefaults.title.text option must be set in order to display the title.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  axisDefaults: {
    title: {
      text: "Axis Title",
      color: "blue"
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

axisDefaults.visible

Boolean

If set to true the chart will display the axis. By default the axis is visible.

Default: true

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

Related Members