Edit this page

valueAxis.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 value axis major grid lines

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

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

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

Example - set the value axis major grid line color as a hex string

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

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

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

Example - set the value axis major grid line color by name

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

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

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

Example - set the value axis major grid line dash type

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis: [{
    majorGridLines: {
      dashType: "dashDot"
    }
  }],
  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.

Example - use arcs for radarLine chart

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

valueAxis.majorGridLines.visible Boolean (default: true)

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

Example - hide the value axis major grid lines

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

valueAxis.majorGridLines.width Number (default: 1)

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

Example - set the value axis major grid lines width

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

valueAxis.majorGridLines.step Number (default: 1)

The step of the value axis major grid lines.

Example - set the value axis major grid lines step

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

valueAxis.majorGridLines.skip Number (default: 0)

The skip of the value axis major grid lines.

Example - set the value axis major grid lines skip

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