valueAxis

Array|Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: {
      min: 0,
      max: 10,
      majorUnit: 2
  },
  series: [
    { data: [1, 2] }
  ]
});
</script>

valueAxis.axisCrossingValue

Object|Date|Array

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

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

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
      data: [4,7,10]
    }],
    categoryAxes: [{
      categories: ["A", "B", "C"]
    }, {
      categories: ["D", "E", "F"]
    }],
    valueAxis:  {
      axisCrossingValues: [0, 12]
    }
});
</script>

valueAxis.background

String

The background color of the axis.

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

valueAxis.color

String

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

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

valueAxis.crosshair

Object

The crosshair configuration options.

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

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

valueAxis.labels

Object

The axis labels configuration.

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

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

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

valueAxis.majorTicks

Object

The configuration of the value axis major ticks.

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

valueAxis.majorUnit

Number

The interval between major divisions. If the valueAxis.type is set to "log", the majorUnit value will be used for the base of the logarithm.

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

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

valueAxis.max

Number

The maximum value of the axis.

Default: 1

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

The minimum value of the axis. Under certain conditions, the narrowRange setting can overwrite this setting. To give priority to the min setting of your choice, set valueAxis.narrowRange to false.

Default: 0

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

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

valueAxis.minorTicks

Object

The configuration of the value axis minor ticks.

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

valueAxis.minorUnit

Number

The interval between minor divisions. It defaults to 1/5 of the valueAxis.majorUnit. If the valueAxis.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({
  valueAxis: {
    minorUnit: 2
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

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

valueAxis.name

String

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

Default: "primary"

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

valueAxis.narrowRange

Boolean

If set to true the Chart will narrow the value axis range in order to display data points in better detail. Setting it to false will force the automatic axis range to start from 0 or the explicitly specified valueAxis.min value.

Default: true

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

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

valueAxis.notes

Object

The value axis notes configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    notes: {
      position: "top",
      data: [{
        value: 5,
        text: "Important value"
      }]
    }
  }],
  series: [
    { data: [1, 2, 3, 4, 5, 6] }
  ]
});
</script>

valueAxis.pane

String

The name of the pane that the value 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: [
    { data: [1,2,3] },
    { data: [1,2,3,4],
      axis: "secondValueAxis"
    }
  ],
  panes:[
    { name: "topPane" },
    { name: "bottomPane" }
  ],
  valueAxis: [
    { pane: "topPane" },
    { name: "secondValueAxis", pane: "bottomPane" }
  ]
});
</script>

valueAxis.plotBands

Array

The plot bands of the value axis.

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

valueAxis.reverse

Boolean

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

Important

A reverse value axis is not supported for radar and polar charts.

Default: false

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

valueAxis.title

Object

The title configuration of the value axis.

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

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

valueAxis.type

String

The axis type.

The supported values are:

"numeric" - numeric axis.
"log" - logarithmic axis.

Default: "numeric"

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

valueAxis.visible

Boolean

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

Default: true

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

valueAxis.zIndex

Number

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

Available for RadarChart

<div id='chart'></div>
<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Employment candidate review"
            },
            seriesDefaults: {
                type: "radarArea"
            },
            series: [{
                name: "Andrew Dodsworth",
                data: [10, 3, 3, 10, 2, 10]
            }],
            categoryAxis: {
                categories: [
                    "Experience", "Communication", "Friendliness",
                    "Subject knowledge", "Presentation", "Education"
                ]
            },
            valueAxis: {
              	zIndex:1,
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: true
                }
            }
        });
    }

    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
</script>

Related Members