New to Kendo UI for jQuery? Start a free 30-day trial

ValueAxis

configuration

The value axis configuration options.

valueAxis

Array

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    valueAxis: {
        min: 0,
        max: 100,
        title: {
            text: "Value"
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ]
    }]
});
</script>

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)

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    valueAxis: {
        axisCrossingValue: 10
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ]
    }]
});
</script>

valueAxis.background

String

The background color of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    valueAxis: {
        background: "#ff0000"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ]
    }]
});
</script>

valueAxis.color

String

Color to apply to all axis elements.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    valueAxis: {
        color: "#ff0000"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ]
    }]
});
</script>

Individual color settings for line and labels take priority. Any valid CSS color string will work here, including hex and rgb.

valueAxis.crosshair

Object

The crosshair configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            color: "red",
            width: 2
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.labels

Object

Configures the axis labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    valueAxis: {
        labels: {
            background: "#ff0000",
            color: "#ffffff"
        }
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ]
    }]
});
</script>

valueAxis.line

Object

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        line: {
            color: "red",
            width: 3,
            dashType: "dash"
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        majorGridLines: {
            color: "green",
            width: 2,
            visible: true
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.majorTicks

Object

The major ticks of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        majorTicks: {
            size: 10,
            color: "blue",
            width: 2,
            visible: true
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.majorUnit

Number

The interval between major divisions.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        majorUnit: 5
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.max

Number

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

Default: 1

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        max: 25
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.min

Number

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

Default: 0

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        min: 5
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        minorGridLines: {
            visible: true,
            color: "lightgray",
            width: 1
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.minorTicks

Object

The minor ticks of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        minorTicks: {
            visible: true,
            size: 5,
            color: "blue",
            width: 2
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.minorUnit

Number

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        minorUnit: 2
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.name

Object

The unique axis name.

Default: "primary"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        name: "stockValue"
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.narrowRange

Boolean

Prevents the automatic axis range from snapping to 0.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        narrowRange: true
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.notes

Object

The value axis notes configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        notes: {
            position: "left",
            data: [{
                value: 105,
                label: { text: "Important level" }
            }]
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    panes: [
        { name: "topPane" },
        { name: "bottomPane" }
    ],
    valueAxis: {
        pane: "topPane"
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.plotBands

Array

The plot bands of the value axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        plotBands: [{
            from: 11,
            to: 14,
            color: "lightblue",
            opacity: 0.5
        }]
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.reverse

Boolean

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

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        reverse: true
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.title

Object

The title of the value axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        title: {
            text: "Price",
            color: "blue"
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.visible

Boolean

The visibility of the axis.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        visible: false
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

Related Members