Edit this page

yAxis.majorGridLines Object

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

Example - configure the scatter chart y axis major grid lines

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

yAxis.majorGridLines.color String (default: "black")

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

Setting the color option affects the major and minor ticks, but not the grid lines.

Example - set the scatter chart x major grid lines color as a hex string

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

Example - set the scatter chart x major grid lines color as a RGB value

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

Example - set the scatter chart x major grid lines color by name

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

yAxis.majorGridLines.dashType String (default: "solid")

The dash type of the line.

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 scatter chart x major grid lines dash type

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

yAxis.majorGridLines.visible Boolean (default: true)

If set to false the chart will not display the y major grid lines. By default the y major grid lines are visible.

Example - hide the scatter chart y major grid lines

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

yAxis.majorGridLines.width Number (default: 1)

The width of the line in pixels. Also affects the major and minor ticks, but not the grid lines.

Example - set the scatter chart x major grid lines width

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

yAxis.majorGridLines.step Number (default: 1)

The step of the y axis major grid lines.

Example - set the y axis major grid lines step

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

yAxis.majorGridLines.skip Number (default: 0)

The skip of the y axis major grid lines.

Example - set the y axis major grid lines skip

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  yAxis: [{
    majorGridLines: {
      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