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.

    Example - configure the value axis minor grid lines

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

    valueAxis.minorGridLines.color String (default: "black")

    The color of the minor grid lines. Accepts a valid CSS color string, including hex and rgb.

    Example - set the value axis minor grid line color as a hex string

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

    Example - set the value axis minor grid line color as a RGB value

    Open In Dojo
    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
      valueAxis: {
        minorGridLines: {
          color: "rgb(128, 0, 255)"
        }
      },
      series: [
        { data: [1, 2, 3] }
      ]
    });
    </script>

    Example - set the value axis minor grid line color by name

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

    valueAxis.minorGridLines.dashType String (default: "solid")

    The dash type of the minor grid lines.

    The following dash types are supported:

    • "dash" - a line consisting of dashes
    • "dashDot" - a line consisting of a repeating pattern of dash-dot
    • "dot" - a line consisting of dots
    • "longDash" - a line consisting of a repeating pattern of long-dash
    • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
    • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
    • "solid" - a solid line

    Example - set the value axis minor grid line dash type

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

    valueAxis.minorGridLines.type String

    The type of grid lines to draw for radar charts:

    • "line" - draws straight lines.
    • "arc" - draws arcs.

    The default type is "line" except for "radarColumn" charts.

    Example - show arcs for both major and minor gridlines

    Open In Dojo
    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
      valueAxis: [{
        minorGridLines: {
          type: "arc",
          visible: true
        },
        majorGridLines: {
          type: "arc"
        }
      }],
      series: [
        {
          type: "radarLine",
          data: [1, 2, 3]
        }
      ]
    });
    </script>

    valueAxis.minorGridLines.visible Boolean (default: false)

    If set to true the chart will display the minor grid lines. By default the minor grid lines are visible.

    Example - hide the value axis minor grid lines

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

    valueAxis.minorGridLines.width Number (default: 1)

    The width of the value axis minor grid lines in pixels.

    Example - set the value axis minor grid lines width

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

    valueAxis.minorGridLines.step Number (default: 1)

    The step of the value axis minor grid lines.

    Example - set the value axis minor grid lines step

    Open In Dojo
    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
      valueAxis: [{
        minorGridLines: {
          step: 2
        },
        categories: ["2011", "2012", "2013"]
      }],
      series: [{
        data: [1, 2, 3]
      }]
    });
    </script>

    valueAxis.minorGridLines.skip Number (default: 0)

    The skip of the value axis minor grid lines.

    Example - set the value axis minor grid lines skip

    Open In Dojo
    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
      valueAxis: [{
        minorGridLines: {
          skip: 2
        },
        categories: ["2011", "2012", "2013"]
      }],
      series: [{
        data: [1, 2, 3]
      }]
    });
    </script>