Introduction
AI Components & Features
Contribution
Knowledge Base
StockChart

valueAxis.crosshairObject

The crosshair configuration options.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            color: "red",
            width: 2
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.colorString

The color of the crosshair.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            color: "red"
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.widthNumber

The width of the crosshair.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            width: 3
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.opacityNumber

The opacity of the crosshair.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            opacity: 0.7
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.dashTypeNumber

The dash type of the crosshair.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            dashType: "dot"
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.visibleBoolean(default: false)

The dash type of the crosshair.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltipObject

The crosshair tooltip configuration options.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                color: "white",
                background: "black"
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.backgroundString

The background color of the tooltip.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                background: "lightblue"
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.borderObject

The border configuration options.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                border: {
                    color: "red",
                    width: 2
                }
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.border.colorString(default: "black")

The color of the border.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                border: {
                    color: "blue"
                }
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.border.widthNumber(default: 0)

The width of the border.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                border: {
                    width: 3
                }
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.colorString

The text color of the tooltip.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                color: "white"
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.fontString(default: "12px Arial,Helvetica,sans-serif")

The tooltip font.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true,
                font: "16px Arial"
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

valueAxis.crosshair.tooltip.formatString

The tooltip format.

Example

pseudo
    //sets format of the tooltip
    format: "C"

valueAxis.crosshair.tooltip.paddingNumber|Object

The padding of the tooltip.

Example

pseudo
    // sets the top, right, bottom and left padding to 3px.
    padding: 3

    // sets the top and left padding to 1px
    // right and bottom padding are left at their default values
    padding: { top: 1, left: 1 }

valueAxis.crosshair.tooltip.templateString|Function

The tooltip template. Template variables:

  • value - the point value (either a number or an object)

Example 

<div id="chart"></div>
<script>
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
             name: "Series 1",
             data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003]
     },
     valueAxis: {
         crosshair: {
             visible: true,
             tooltip: {
                 visible: true,
                 template: "value: #= value #"
             }
         }
     }
});
</script>

valueAxis.crosshair.tooltip.visibleBoolean(default: false)

A value indicating if the tooltip should be displayed.

Example 

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
            { date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
        ]
    },
    dateField: "date",
    valueAxis: {
        crosshair: {
            visible: true,
            tooltip: {
                visible: true
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>
In this article
valueAxis.crosshairvalueAxis.crosshair.colorvalueAxis.crosshair.widthvalueAxis.crosshair.opacityvalueAxis.crosshair.dashTypevalueAxis.crosshair.visiblevalueAxis.crosshair.tooltipvalueAxis.crosshair.tooltip.backgroundvalueAxis.crosshair.tooltip.bordervalueAxis.crosshair.tooltip.border.colorvalueAxis.crosshair.tooltip.border.widthvalueAxis.crosshair.tooltip.colorvalueAxis.crosshair.tooltip.fontvalueAxis.crosshair.tooltip.formatvalueAxis.crosshair.tooltip.paddingvalueAxis.crosshair.tooltip.templatevalueAxis.crosshair.tooltip.visible
Not finding the help you need?
Contact Support