categoryAxis.titleObject
The title of the category axis.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
title: {
text: "Date",
color: "#ff6800",
font: "16px Arial"
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.title.backgroundString
The background color of the title. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
title: {
text: "Date",
background: "#ffcccc"
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.title.borderObject
The border of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
title: {
text: "Date",
border: {
color: "#ff6800",
width: 2
}
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.title.border.colorString(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
title: {
text: "Date",
border: {
color: "#ff6800"
}
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.title.border.dashTypeString(default: "solid")
The dash type of the border.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date" // Specify date field for category axis
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date",
stack: { group: "group1" }
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
border: {
dashType: "dash",
width: 2,
color: "red"
},
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
categoryAxis.title.border.widthNumber(default: 0)
The width of the border.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date" // Specify date field for category axis
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date",
stack: { group: "group1" }
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
border: {
dashType: "dash",
width: 2,
color: "red"
},
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.colorString
The text color of the title. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
border: {
dashType: "dash",
width: 2,
color: "red"
},
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.fontString(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
font: "16px sans-serif",
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.marginNumber|Object(default: 5)
The margin of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
margin: 15
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.positionString(default: "center")
The position of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
position: "left"
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>"top"
The axis title is positioned on the top (applicable to vertical axis)
"bottom"
The axis title is positioned on the bottom (applicable to vertical axis)
"left"
The axis title is positioned on the left (applicable to horizontal axis)
"right"
The axis title is positioned on the right (applicable to horizontal axis)
"center"
The axis title is positioned in the center
categoryAxis.title.rotationNumber(default: 0)
The rotation angle of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
rotation: 45
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.textString
The text of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title"
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>categoryAxis.title.visibleBoolean(default: true)
The visibility of the title.
Example
<div id="stockChart"></div>
<script>
$(document).ready(function () {
// Sample local stock data
var stockData = [
{ date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
{ date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
{ date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
];
$("#stockChart").kendoStockChart({
series: [{
type: "candlestick",
data: stockData, // Data passed directly to series
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date", // Specify date field for category axis
name: "Stock Price"
}],
navigator: {
series: {
type: "candlestick",
data: stockData, // Navigator needs its own data reference
field: "close", // Use closing price for navigator
dateField: "date"
},
select: {
from: new Date(2024, 0, 10), // Initial selection start
to: new Date(2024, 0, 20) // Initial selection end
}
},
categoryAxis: {
title: {
text: "Category Title",
visible: false
},
baseUnit: "days",
labels: {
format: "MMM dd"
}
},
valueAxis: {
labels: {
format: "${0}"
}
}
});
});
</script>In this article