New to Kendo UI for jQuery? Start a free 30-day trial

CategoryAxis.title.border

configuration

The border of the title.

categoryAxis.title.border

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",
            border: {
                color: "#ff6800",
                width: 2
            }
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.title.border.color

String

The color of the border. Any valid CSS color string will work here, including hex and rgb.

Default: "black"

<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.dashType

String

The dash type of the border.

"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.

Default: "solid"

<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.border.width

Number

The width of the border.

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
        }],
        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>