Edit this page

yAxis.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 category axis minor grid lines

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

yAxis.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 category axis minor grid line color as a hex string

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

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

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

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

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

yAxis.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 category axis minor grid line dash type

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

yAxis.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 category axis minor grid lines

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

yAxis.minorGridLines.width Number (default: 1)

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

Example - set the category axis minor grid lines width

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

yAxis.minorGridLines.step Number (default: 1)

The step of the y axis minor grid lines.

Example - set the y axis minor grid lines step

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

yAxis.minorGridLines.skip Number (default: 0)

The skip of the y axis minor grid lines.

Example - set the y axis minor grid lines skip

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  yAxis: [{
    minorGridLines: {
      skip: 2
    }
  }],
  series: [{
    data: [1, 2, 3]
  }]
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy