xAxis

Array

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]] }
  ],
  xAxis: {
    color: "red",
    min: -5,
    max: 5,
    labels: {
      background: "green",
      color: "white"
    }
  }
});
</script>

xAxis.axisCrossingValue

Object|Date|Array

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

Value indices at which the Y axes cross the value axis. (Only for array)

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

Set a value greater than or equal to the axis maximum value to denote the far end of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]] }
  ],
  xAxis: {
    axisCrossingValue: [1, 2]
  }
});
</script>

xAxis.background

String

The background color of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]] }
  ],
  xAxis: {
    background: "#ff0000"
  }
});
</script>

xAxis.baseUnit

String

The base time interval for the axis labels. The default baseUnit is determined automatically from the value range. Available options:

milliseconds
seconds
minutes
hours
days
weeks
months
years

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",
      data: [
        [new Date("01/01/2013"), 2],
        [new Date("01/02/2013"), 2],
        [new Date("01/03/2013"), 2]
      ]
    }
  ],
  xAxis: {
    type: "date",
    baseUnit: "hours"
  }
});
</script>

xAxis.categories

Array

The category names. Applicable for charts with X and Y category axes (heatmap).

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: 'heatmap',
    data: [
      [ 'a', 'v2', 1 ],
      [ 'a', 'v1', 0 ]
    ]
  }],
  xAxis: {
    categories: ['a', 'b', 'c']
  },
  yAxis: {
    categories: ['v1', 'v2']
  }
});
</script>

xAxis.color

String

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

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

xAxis.crosshair

Object

The crosshair configuration options.

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

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

xAxis.labels

Object

The axis labels configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]] }
  ],
  xAxis: {
    labels: {
      background: "green",
      color: "white"
    }
  }
});
</script>

xAxis.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({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    line: {
      color: "#aa00bb",
      width: 3
    }
  }
});
</script>

xAxis.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({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    majorGridLines: {
      color: "#aa00bb",
      width: 3
    }
  }
});
</script>

xAxis.majorTicks

Object

The configuration of the scatter chart x axis major ticks.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    majorTicks: {
      size: 6,
      color: "green",
      width: 5
    }
  }
});
</script>

The interval between major divisions. If this is a date axis the value represents the number of xAxis.baseUnits between major divisions. If the xAxis.type is set to "log", the majorUnit value will be used for the base of the logarithm.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    majorUnit: 1
  }
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatterLine",
    data: [[new Date(2012, 0, 1), 1],[new Date(2012, 0, 10), 2]]
  }],
  xAxis: {
    baseUnit: "days",
    majorUnit: 5
  }
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatterLine",
    data: [[5, 1], [8, 2], [1024, 3]]
  }],
  xAxis: {
    type: "log",
    majorUnit: 2
  }
});
</script>

xAxis.max

Object

The maximum value of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    max: 5
  }
});
</script>

xAxis.min

Object

The minimum value of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    min: 1
  }
});
</script>

xAxis.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({
  series: [{
    type: "scatter",
    data: [[1, 1],[2, 2]]
  }],
  xAxis: {
    minorGridLines: {
      width: 3
    }
  }
});
</script>

xAxis.minorTicks

Object

The configuration of the x axis minor ticks.

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

xAxis.minorUnit

Number

The interval between minor divisions. It defaults to 1/5 of the xAxis.majorUnit. If the xAxis.type is set to "log", the minorUnit value represents the number of divisions between two major units and defaults to the major unit minus one.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    type: "log",
    minorUnit: 2,
    minorGridLines: {
      visible: true
    }
  },
  series: [{
      type: "scatter",
      data: [[3, 1],[20, 2]]
    }]
});
</script>

xAxis.name

String

The unique axis name. Used to associate a series with a x axis using the series.xAxis option.

Default: "primary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1000, 2000]], xAxis: "first" },
    { type: "scatter", data: [[5, 6]], xAxis: "second" }
  ],
  xAxis: [
    { name: "first"},
    { name: "second"}
  ]
});
</script>

xAxis.narrowRange

Boolean

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

Default: false

<div id="chart"></div>
<script>
    $("#chart").kendoChart({
      series: [{
        type: "scatter",
        data: [[1000, 1000],[2000, 2000]]
      }],
      xAxis: {
        narrowRange: true
      },
      yAxis: {
        narrowRange: true
      }
    });
</script>

<div id="chart"></div>
<script>
    $("#chart").kendoChart({
      series: [{
        type: "scatter",
        data: [[1000, 1000],[1100, 1100]]
      }],
      xAxis: {
        narrowRange: false
      },
      yAxis: {
        narrowRange: false
      }
    });
</script>

xAxis.notes

Object

The x axis notes configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    notes: {
      position: "top",
      data: [{
        value: 2,
        text: "Note at 2"
      }]
    }
  },
  series: [
    { type: "scatter", data: [[1, 2], [2, 3], [3, 4]] }
  ]
});
</script>

xAxis.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({
  series: [
    { type: "scatter", data: [[1, 2]], xAxis: "first", yAxis: "first" },
    { type: "scatter", data: [[5, 6]], xAxis: "second", yAxis: "second" }
  ],
  panes: [
    { name: "topPane" },
    { name: "bottomPane" },
  ],
  xAxis: [
    { name: "first"},
    { name: "second", pane: "bottomPane" }
  ],
  yAxis: [
    { name: "first"},
    { name: "second", pane: "bottomPane" }
  ]
});
</script>

xAxis.plotBands

Array

The plot bands of the x axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]]}
  ],
  xAxis: {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  }
});
</script>

xAxis.reverse

Boolean

If set to true the value axis direction will be reversed. By default values increase from left to right and from bottom to top.

Default: false

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

xAxis.startAngle

Number

The angle (degrees) where the 0 value is placed. Applicable to polar series.

Angles increase counterclockwise and zero is to the right. Negative values are acceptable.

Default: 0

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

xAxis.title

Object

The title configuration of the scatter chart x axis.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  xAxis: {
    title: {
      text: "Years",
      background: "green",
      border: {
        width: 1,
      }
    }
  },
  series: [
    { type: "scatter", data: [[1, 2]] }
  ]
});
</script>

xAxis.type

String

The axis type.

The supported values are:

"numeric" - numeric axis.
"date" - specialized axis for displaying chronological data.
"log" - logarithmic axis.

The chart will automatically switch to a date axis if the series X value

is of type Date. Set the xAsix.type when such behavior is undesired.

Default: "numeric"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",
      data: [
        [new Date("01/01/2013"), 2],
        [new Date("01/02/2013"), 2],
        [new Date("01/03/2013"), 2]
      ]
    }
  ],
  xAxis: {
    type: "date"
  }
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      type: "scatter",
      data: [
        [5, 2],
        [7, 2],
        [11123, 2]
      ]
    }
  ],
  xAxis: {
    type: "log"
  }
});
</script>

xAxis.visible

Boolean

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

Default: true

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

Related Members