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

ValueAxis.minorGridLines

configuration

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.

valueAxis.minorGridLines

Object

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

valueAxis.minorGridLines.color

String

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

Default: "black"

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

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

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

valueAxis.minorGridLines.dashType

String

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

Default: "solid"

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

valueAxis.minorGridLines.skip

Number

The skip of the value axis minor grid lines.

Default: 0

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

valueAxis.minorGridLines.step

Number

The step of the value axis minor grid lines.

Default: 1

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    minorGridLines: {
      step: 2
    },
    categories: ["2011", "2012", "2013"]
  }],
  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.

<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

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

Default: false

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

valueAxis.minorGridLines.width

Number

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

Default: 1

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