axisDefaults.majorGridLinesObject
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 axisDefaults majorGridLines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
color: "blue",
width: 2,
dashType: "dash"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.colorString(default: "black")
The color of the major grid lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults majorGridLines color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
color: "red"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.dashTypeString(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 axisDefaults majorGridLines dashType
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
dashType: "dot"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.visibleBoolean(default: true)
If set to false the chart will not display the major grid lines. By default the major grid lines are visible.
Example - set the axisDefaults majorGridLines visible
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
visible: false
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.widthNumber(default: 1)
The width of the axis major grid lines in pixels.
Example - set the axisDefaults majorGridLines width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
width: 3
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.stepNumber(default: 1)
The step of the axis major grid lines.
Example - set the axisDefaults majorGridLines step
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
step: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.majorGridLines.skipNumber(default: 0)
The skip of the axis major grid lines.
Example - set the axisDefaults majorGridLines skip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
majorGridLines: {
skip: 1
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>In this article