CategoryAxis.title
configurationThe title of the category axis.
categoryAxis.title
Object<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>The background color of the title. Any valid CSS color string will work here, including hex and rgb.
<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>The border of the title.
<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.color
StringThe text color of the title. Any valid CSS color string will work here, including hex and rgb.
<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.font
StringThe font style of the title.
Default: "16px Arial,Helvetica,sans-serif"
<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.margin
Number|ObjectThe margin of the title.
Default: 5
<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>The position of the title.
"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
Default: "center"
<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>The rotation angle of the title.
Default: 0
<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.text
StringThe text of the title.
<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.visible
BooleanThe visibility of the title.
Default: true
<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>Related Members
- categoryAxis.title.border - The border of the title.