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

ValueAxis.majorGridLines

configuration

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

valueAxis.majorGridLines

Object

<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.majorGridLines.color

String

The color of the lines.

Default: "black"

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

valueAxis.majorGridLines.skip

Number

The skip of the value axis major grid lines.

Default: 0

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

valueAxis.majorGridLines.step

Number

The step of the value axis major grid lines.

Default: 1

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

valueAxis.majorGridLines.visible

Boolean

The visibility of the lines.

Default: false

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

valueAxis.majorGridLines.width

Number

The width of the lines.

Default: 1

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