valueAxis.line Object
The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
Example - configure the value axis line
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "#aa00bb",
width: 3
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.line.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 value axis line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.line.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 value axis line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
dashType: "dashDot"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.line.visible Boolean
(default: true)
If set to true
the chart will display the value axis lines. By default the value axis lines are visible.
Example - hide the value axis lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.line.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 value axis line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
width: 3
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>