• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

ChartTooltipProps

Represents the props of the KendoReact ChartTooltip component (see example).

NameTypeDefaultDescription

background?

string

The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.

border?

Border

The border configuration options.

color?

string

The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.

font?

string

The font of the tooltip.

format?

string

The format of the labels. Uses the format method of IntlService.

The available format placeholders are:

  • Area, Bar, Column, Funnel, Pyramid, Line, and Pie: {0} - value.
  • Bubble: {0} - x value, {1} - y value, {2} - size value, {3} - category name.
  • Scatter and scatterLine: {0} - x value, {1} - y value.
  • Candlestick and OHLC: {0} - open value, {1} - high value, {2} - low value, {3} - close value, {4} - category name.

opacity?

number

The opacity of the tooltip.

padding?

number | Padding

The padding of the tooltip. A numeric value sets all paddings.

render?

(props: TooltipContext) => ReactNode | (props: SharedTooltipContext) => ReactNode

shared?

boolean

If set to true, the Chart displays a single tooltip for every category (see example).

visible?

boolean

If set to true, the Chart displays the series tooltip. By default, the series tooltip is not displayed.