series.lineString | Object
Line options.
** Applicable to area, candlestick and ohlc series. **
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
{ date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
]
},
categoryField: "date",
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
line: {
color: "#ff6800",
width: 2
}
}]
});
</script>series.line.colorString
The line color.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
{ date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
]
},
categoryField: "date",
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
line: {
color: "#ff6800"
}
}]
});
</script>series.line.opacityNumber(default: 1)
The line opacity.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
{ date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
]
},
categoryField: "date",
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
line: {
opacity: 0.7
}
}]
});
</script>series.line.widthString(default: 4)
The line width.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
{ date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
]
},
categoryField: "date",
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
line: {
width: 3
}
}]
});
</script>series.line.styleString(default: "normal")
The supported values are:
- "normal" - The values will be connected with straight line.
- "step" - The values will be connected with a line with right angle.
- "smooth" - The values will be connected with a smooth line.
The default value is "normal".
The
styleoption is supported when series.type is set to "area".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), value: 100 },
{ date: new Date(2023, 1, 2), value: 105 },
{ date: new Date(2023, 1, 3), value: 98 }
]
},
categoryField: "date",
series: [{
type: "area",
field: "value",
line: {
style: "smooth"
}
}]
});
</script>