valueAxis

Array

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    valueAxis: {
        min: 0,
        max: 20,
        color: "blue",
        labels: {
            visible: true,
            color: "red"
        },
        line: {
            visible: true,
            width: 2
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    valueAxis: {
        axisCrossingValue: 5
    },
    series: [{
        data: [2, 8, 12, 4, 15]
    }]
});
</script>

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.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    valueAxis: {
        color: "green",
        labels: {
            visible: true
        },
        line: {
            visible: true
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.crosshair

Object

The crosshair configuration options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        crosshair: {
            visible: true,
            color: "red",
            width: 2,
            opacity: 0.8
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.labels

Object

Configures the axis labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    valueAxis: {
        labels: {
            visible: true,
            background: "lightgray",
            color: "blue",
            font: "12px Arial",
            format: "C",
            rotation: 45
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.line

Object

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        line: {
            color: "blue",
            width: 2
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        majorGridLines: {
            visible: true,
            color: "#dddddd",
            width: 1
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.majorTicks

Object

The major ticks of the axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        majorTicks: {
            visible: true,
            size: 6,
            color: "blue"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.majorUnit

Number

The interval between major divisions.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        majorUnit: 5
    },
    series: [{
        data: [10, 15, 8, 12, 20, 25]
    }]
});
</script>

valueAxis.max

Number

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

Default: 1

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        max: 30
    },
    series: [{
        data: [10, 15, 8, 12, 20, 25]
    }]
});
</script>

valueAxis.min

Number

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

Default: 0

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        min: 5
    },
    series: [{
        data: [10, 15, 8, 12, 20, 25]
    }]
});
</script>

valueAxis.minorGridLines

Object

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        minorGridLines: {
            visible: true,
            color: "#eeeeee",
            width: 1
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.minorTicks

Object

The minor ticks of the axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        minorTicks: {
            visible: true,
            size: 5,
            color: "green"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.minorUnit

Number

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        minorUnit: 2
    },
    series: [{
        data: [10, 15, 8, 12, 20, 25]
    }]
});
</script>

valueAxis.name

Object

The unique axis name.

Default: "primary"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        name: "customAxis"
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.narrowRange

Boolean

Prevents the automatic axis range from snapping to 0.

Default: true

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        narrowRange: false
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.notes

Object

The value axis notes configuration.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        notes: {
            position: "left",
            icon: {
                background: "red"
            },
            data: [{
                value: 15,
                text: "Target"
            }]
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.plotBands

Array

The plot bands of the value axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        plotBands: [{
            from: 10,
            to: 20,
            color: "#ffcccc",
            opacity: 0.5
        }]
    },
    series: [{
        data: [5, 15, 8, 25, 12]
    }]
});
</script>

valueAxis.reverse

Boolean

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

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        reverse: true
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.title

Object

The title of the value axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        title: {
            text: "Values",
            color: "blue",
            font: "14px Arial"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.visible

Boolean

The visibility of the axis.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        visible: true
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

Related Members