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

YAxis.majorGridLines

configuration

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.

yAxis.majorGridLines

Object

<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

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.

Default: "black"

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

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

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

yAxis.majorGridLines.dashType

String

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

Default: "solid"

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

yAxis.majorGridLines.skip

Number

The skip of the y axis major grid lines.

Default: 0

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

yAxis.majorGridLines.step

Number

The step of the y axis major grid lines.

Default: 1

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

yAxis.majorGridLines.visible

Boolean

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

Default: true

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

yAxis.majorGridLines.width

Number

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

Default: 1

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