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

ValueAxis.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.

valueAxis.majorGridLines

Object

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

valueAxis.majorGridLines.color

String

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

Default: "black"

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

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

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

valueAxis.majorGridLines.dashType

String

The dash type of the major 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: [{
    majorGridLines: {
      dashType: "dashDot"
    }
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

valueAxis.majorGridLines.skip

Number

The skip of the value axis major grid lines.

Default: 0

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

valueAxis.majorGridLines.step

Number

The step of the value axis major grid lines.

Default: 1

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

valueAxis.majorGridLines.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: [{
    majorGridLines: {
      type: "arc"
    }
  }],
  series: [
    {
      type: "radarLine",
      data: [1, 2, 3]
    }
  ]
});
</script>

valueAxis.majorGridLines.visible

Boolean

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

Default: true

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

valueAxis.majorGridLines.width

Number

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

Default: 1

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