166.188135a3.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[166],{522:function(t,s,a){"use strict";a.r(s);var e=a(7),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"tooltip"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip"}},[t._v("#")]),t._v(" Tooltip")]),t._v(" "),s("h2",{attrs:{id:"tooltip-configuration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-configuration"}},[t._v("#")]),t._v(" Tooltip Configuration")]),t._v(" "),s("p",[t._v("Namespace: "),s("code",[t._v("options.plugins.tooltip")]),t._v(", the global options for the chart tooltips is defined in "),s("code",[t._v("Chart.defaults.plugins.tooltip")]),t._v(".")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults. To change the overrides for those chart types, the options are defined in "),s("code",[t._v("Chart.overrides[type].plugins.tooltip")]),t._v(".")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("enabled")])]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td",[s("code",[t._v("true")])]),t._v(" "),s("td",[t._v("Are on-canvas tooltips enabled?")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("external")])]),t._v(" "),s("td",[s("code",[t._v("function")])]),t._v(" "),s("td",[s("code",[t._v("null")])]),t._v(" "),s("td",[t._v("See "),s("a",{attrs:{href:"#external-custom-tooltips"}},[t._v("external tooltip")]),t._v(" section.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("mode")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("interaction.mode")])]),t._v(" "),s("td",[t._v("Sets which elements appear in the tooltip. "),s("RouterLink",{attrs:{to:"/configuration/interactions.html#modes"}},[t._v("more...")]),t._v(".")],1)]),t._v(" "),s("tr",[s("td",[s("code",[t._v("intersect")])]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td",[s("code",[t._v("interaction.intersect")])]),t._v(" "),s("td",[t._v("If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("position")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("'average'")])]),t._v(" "),s("td",[t._v("The mode for positioning the tooltip. "),s("a",{attrs:{href:"#position-modes"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("callbacks")])]),t._v(" "),s("td",[s("code",[t._v("object")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("See the "),s("a",{attrs:{href:"#tooltip-callbacks"}},[t._v("callbacks section")]),t._v(".")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("itemSort")])]),t._v(" "),s("td",[s("code",[t._v("function")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Sort tooltip items. "),s("a",{attrs:{href:"#sort-callback"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("filter")])]),t._v(" "),s("td",[s("code",[t._v("function")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Filter tooltip items. "),s("a",{attrs:{href:"#filter-callback"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("backgroundColor")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'rgba(0, 0, 0, 0.8)'")])]),t._v(" "),s("td",[t._v("Background color of the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("titleColor")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'#fff'")])]),t._v(" "),s("td",[t._v("Color of title text.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("titleFont")])]),t._v(" "),s("td",[s("code",[t._v("Font")])]),t._v(" "),s("td",[s("code",[t._v("{weight: 'bold'}")])]),t._v(" "),s("td",[t._v("See "),s("RouterLink",{attrs:{to:"/general/fonts.html"}},[t._v("Fonts")]),t._v(".")],1)]),t._v(" "),s("tr",[s("td",[s("code",[t._v("titleAlign")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("'left'")])]),t._v(" "),s("td",[t._v("Horizontal alignment of the title text lines. "),s("a",{attrs:{href:"#text-alignment"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("titleSpacing")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("2")])]),t._v(" "),s("td",[t._v("Spacing to add to top and bottom of each title line.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("titleMarginBottom")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("6")])]),t._v(" "),s("td",[t._v("Margin to add on bottom of title section.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("bodyColor")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'#fff'")])]),t._v(" "),s("td",[t._v("Color of body text.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("bodyFont")])]),t._v(" "),s("td",[s("code",[t._v("Font")])]),t._v(" "),s("td",[s("code",[t._v("{}")])]),t._v(" "),s("td",[t._v("See "),s("RouterLink",{attrs:{to:"/general/fonts.html"}},[t._v("Fonts")]),t._v(".")],1)]),t._v(" "),s("tr",[s("td",[s("code",[t._v("bodyAlign")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("'left'")])]),t._v(" "),s("td",[t._v("Horizontal alignment of the body text lines. "),s("a",{attrs:{href:"#text-alignment"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("bodySpacing")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("2")])]),t._v(" "),s("td",[t._v("Spacing to add to top and bottom of each tooltip item.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footerColor")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'#fff'")])]),t._v(" "),s("td",[t._v("Color of footer text.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footerFont")])]),t._v(" "),s("td",[s("code",[t._v("Font")])]),t._v(" "),s("td",[s("code",[t._v("{weight: 'bold'}")])]),t._v(" "),s("td",[t._v("See "),s("RouterLink",{attrs:{to:"/general/fonts.html"}},[t._v("Fonts")]),t._v(".")],1)]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footerAlign")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("'left'")])]),t._v(" "),s("td",[t._v("Horizontal alignment of the footer text lines. "),s("a",{attrs:{href:"#text-alignment"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footerSpacing")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("2")])]),t._v(" "),s("td",[t._v("Spacing to add to top and bottom of each footer line.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footerMarginTop")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("6")])]),t._v(" "),s("td",[t._v("Margin to add before drawing the footer.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("padding")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/padding.html"}},[s("code",[t._v("Padding")])])],1),t._v(" "),s("td",[s("code",[t._v("6")])]),t._v(" "),s("td",[t._v("Padding inside the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("caretPadding")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("2")])]),t._v(" "),s("td",[t._v("Extra distance to move the end of the tooltip arrow away from the tooltip point.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("caretSize")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("5")])]),t._v(" "),s("td",[t._v("Size, in px, of the tooltip arrow.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("cornerRadius")])]),t._v(" "),s("td",[s("code",[t._v("number")]),t._v("|"),s("code",[t._v("object")])]),t._v(" "),s("td",[s("code",[t._v("6")])]),t._v(" "),s("td",[t._v("Radius of tooltip corner curves.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("multiKeyBackground")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'#fff'")])]),t._v(" "),s("td",[t._v("Color to draw behind the colored boxes when multiple items are in the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("displayColors")])]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td",[s("code",[t._v("true")])]),t._v(" "),s("td",[t._v("If true, color boxes are shown in the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("boxWidth")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("bodyFont.size")])]),t._v(" "),s("td",[t._v("Width of the color box if displayColors is true.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("boxHeight")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("bodyFont.size")])]),t._v(" "),s("td",[t._v("Height of the color box if displayColors is true.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("boxPadding")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("1")])]),t._v(" "),s("td",[t._v("Padding between the color box and the text.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("usePointStyle")])]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td",[s("code",[t._v("false")])]),t._v(" "),s("td",[t._v("Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight).")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("borderColor")])]),t._v(" "),s("td",[s("RouterLink",{attrs:{to:"/general/colors.html"}},[s("code",[t._v("Color")])])],1),t._v(" "),s("td",[s("code",[t._v("'rgba(0, 0, 0, 0)'")])]),t._v(" "),s("td",[t._v("Color of the border.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("borderWidth")])]),t._v(" "),s("td",[s("code",[t._v("number")])]),t._v(" "),s("td",[s("code",[t._v("0")])]),t._v(" "),s("td",[t._v("Size of the border.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("rtl")])]),t._v(" "),s("td",[s("code",[t._v("boolean")])]),t._v(" "),s("td"),t._v(" "),s("td",[s("code",[t._v("true")]),t._v(" for rendering the tooltip from right to left.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("textDirection")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[t._v("canvas' default")]),t._v(" "),s("td",[t._v("This will force the text direction "),s("code",[t._v("'rtl' or 'ltr")]),t._v(" on the canvas for rendering the tooltips, regardless of the css specified on the canvas")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("xAlign")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("undefined")])]),t._v(" "),s("td",[t._v("Position of the tooltip caret in the X direction. "),s("a",{attrs:{href:"#tooltip-alignment"}},[t._v("more")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("yAlign")])]),t._v(" "),s("td",[s("code",[t._v("string")])]),t._v(" "),s("td",[s("code",[t._v("undefined")])]),t._v(" "),s("td",[t._v("Position of the tooltip caret in the Y direction. "),s("a",{attrs:{href:"#tooltip-alignment"}},[t._v("more")])])])])]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("If you need more visual customizations, please use an "),s("RouterLink",{attrs:{to:"/samples/tooltip/html.html"}},[t._v("HTML tooltip")]),t._v(".")],1)]),t._v(" "),s("h3",{attrs:{id:"position-modes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#position-modes"}},[t._v("#")]),t._v(" Position Modes")]),t._v(" "),s("p",[t._v("Possible modes are:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("'average'")])]),t._v(" "),s("li",[s("code",[t._v("'nearest'")])])]),t._v(" "),s("p",[s("code",[t._v("'average'")]),t._v(" mode will place the tooltip at the average position of the items displayed in the tooltip. "),s("code",[t._v("'nearest'")]),t._v(" will place the tooltip at the position of the element closest to the event position.")]),t._v(" "),s("p",[t._v("You can also define "),s("a",{attrs:{href:"#custom-position-modes"}},[t._v("custom position modes")]),t._v(".")]),t._v(" "),s("h3",{attrs:{id:"tooltip-alignment"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-alignment"}},[t._v("#")]),t._v(" Tooltip Alignment")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("xAlign")]),t._v(" and "),s("code",[t._v("yAlign")]),t._v(" options define the position of the tooltip caret. If these parameters are unset, the optimal caret position is determined.")]),t._v(" "),s("p",[t._v("The following values for the "),s("code",[t._v("xAlign")]),t._v(" setting are supported.")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("'left'")])]),t._v(" "),s("li",[s("code",[t._v("'center'")])]),t._v(" "),s("li",[s("code",[t._v("'right'")])])]),t._v(" "),s("p",[t._v("The following values for the "),s("code",[t._v("yAlign")]),t._v(" setting are supported.")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("'top'")])]),t._v(" "),s("li",[s("code",[t._v("'center'")])]),t._v(" "),s("li",[s("code",[t._v("'bottom'")])])]),t._v(" "),s("h3",{attrs:{id:"text-alignment"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#text-alignment"}},[t._v("#")]),t._v(" Text Alignment")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("titleAlign")]),t._v(", "),s("code",[t._v("bodyAlign")]),t._v(" and "),s("code",[t._v("footerAlign")]),t._v(" options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("'left'")]),t._v(" (default)")]),t._v(" "),s("li",[s("code",[t._v("'right'")])]),t._v(" "),s("li",[s("code",[t._v("'center'")])])]),t._v(" "),s("p",[t._v("These options are only applied to text lines. Color boxes are always aligned to the left edge.")]),t._v(" "),s("h3",{attrs:{id:"sort-callback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sort-callback"}},[t._v("#")]),t._v(" Sort Callback")]),t._v(" "),s("p",[t._v("Allows sorting of "),s("a",{attrs:{href:"#tooltip-item-context"}},[t._v("tooltip items")]),t._v(". Must implement at minimum a function that can be passed to "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array.prototype.sort"),s("OutboundLink")],1),t._v(". This function can also accept a third parameter that is the data object passed to the chart.")]),t._v(" "),s("h3",{attrs:{id:"filter-callback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#filter-callback"}},[t._v("#")]),t._v(" Filter Callback")]),t._v(" "),s("p",[t._v("Allows filtering of "),s("a",{attrs:{href:"#tooltip-item-context"}},[t._v("tooltip items")]),t._v(". Must implement at minimum a function that can be passed to "),s("a",{attrs:{href:"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array.prototype.filter"),s("OutboundLink")],1),t._v(". This function can also accept a fourth parameter that is the data object passed to the chart.")]),t._v(" "),s("h2",{attrs:{id:"tooltip-callbacks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-callbacks"}},[t._v("#")]),t._v(" Tooltip Callbacks")]),t._v(" "),s("p",[t._v("Namespace: "),s("code",[t._v("options.plugins.tooltip.callbacks")]),t._v(", the tooltip has the following callbacks for providing text. For all functions, "),s("code",[t._v("this")]),t._v(" will be the tooltip object created from the "),s("code",[t._v("Tooltip")]),t._v(" constructor. If the callback returns "),s("code",[t._v("undefined")]),t._v(", then the default callback will be used. To remove things from the tooltip callback should return an empty string.")]),t._v(" "),s("p",[t._v("Namespace: "),s("code",[t._v("data.datasets[].tooltip.callbacks")]),t._v(", items marked with "),s("code",[t._v("Yes")]),t._v(" in the column "),s("code",[t._v("Dataset override")]),t._v(" can be overridden per dataset.")]),t._v(" "),s("p",[t._v("A "),s("a",{attrs:{href:"#tooltip-item-context"}},[t._v("tooltip item context")]),t._v(" is generated for each item that appears in the tooltip. This is the primary model that the callback methods interact with. For functions that return text, arrays of strings are treated as multiple lines of text.")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Arguments")]),t._v(" "),s("th",[t._v("Return Type")]),t._v(" "),s("th",[t._v("Dataset override")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("beforeTitle")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns the text to render before the title.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("title")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render as the title of the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("afterTitle")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render after the title.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("beforeBody")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render before the body section.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("beforeLabel")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns text to render before an individual label. This will be called for each item in the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("label")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns text to render for an individual item in the tooltip. "),s("a",{attrs:{href:"#label-callback"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("labelColor")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("object | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns the colors to render for the tooltip item. "),s("a",{attrs:{href:"#label-color-callback"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("labelTextColor")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("Color | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns the colors for the text of the label for the tooltip item.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("labelPointStyle")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("object | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns the point style to use instead of color boxes if usePointStyle is true (object with values "),s("code",[t._v("pointStyle")]),t._v(" and "),s("code",[t._v("rotation")]),t._v("). Default implementation uses the point style from the dataset points. "),s("a",{attrs:{href:"#label-point-style-callback"}},[t._v("more...")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("afterLabel")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td",[t._v("Yes")]),t._v(" "),s("td",[t._v("Returns text to render after an individual label.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("afterBody")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render after the body section.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("beforeFooter")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render before the footer section.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("footer")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Returns text to render as the footer of the tooltip.")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("afterFooter")])]),t._v(" "),s("td",[s("code",[t._v("TooltipItem[]")])]),t._v(" "),s("td",[s("code",[t._v("string | string[] | undefined")])]),t._v(" "),s("td"),t._v(" "),s("td",[t._v("Text to render after the footer section.")])])])]),t._v(" "),s("h3",{attrs:{id:"label-callback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#label-callback"}},[t._v("#")]),t._v(" Label Callback")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("label")]),t._v(" callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a "),s("code",[t._v("'$'")]),t._v(" before every row.")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" chart "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chart")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'line'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tooltip")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("callbacks")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("label")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" label "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dataset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("label "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            label "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("': '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            label "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Intl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("NumberFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currency'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'USD'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"label-color-callback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#label-color-callback"}},[t._v("#")]),t._v(" Label Color Callback")]),t._v(" "),s("p",[t._v("For example, to return a red box with a blue dashed border that has a border radius for each item in the tooltip you could do:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" chart "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chart")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'line'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tooltip")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("callbacks")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("labelColor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("borderColor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rgb(0, 0, 255)'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("backgroundColor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rgb(255, 0, 0)'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("borderWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("borderDash")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("borderRadius")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("labelTextColor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#543453'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"label-point-style-callback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#label-point-style-callback"}},[t._v("#")]),t._v(" Label Point Style Callback")]),t._v(" "),s("p",[t._v("For example, to draw triangles instead of the regular color box for each item in the tooltip you could do:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" chart "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chart")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'line'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tooltip")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePointStyle")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("callbacks")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("labelPointStyle")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pointStyle")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'triangle'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rotation")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"tooltip-item-context"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-item-context"}},[t._v("#")]),t._v(" Tooltip Item Context")]),t._v(" "),s("p",[t._v("The tooltip items passed to the tooltip callbacks implement the following interface.")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The chart the tooltip is being shown on")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("chart")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Chart\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Label for the tooltip")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("label")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Parsed data values for the given `dataIndex` and `datasetIndex`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("parsed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Raw data values for the given `dataIndex` and `datasetIndex`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("raw")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Formatted value for the tooltip")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("formattedValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The dataset the item comes from")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dataset")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Index of the dataset the item comes from")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("datasetIndex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Index of this data item in the dataset")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dataIndex")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The chart element (point, arc, bar, etc.) for this tooltip item")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("element")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"external-custom-tooltips"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#external-custom-tooltips"}},[t._v("#")]),t._v(" External (Custom) Tooltips")]),t._v(" "),s("p",[t._v("External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The "),s("code",[t._v("external")]),t._v(" option takes a function which is passed a context parameter containing the "),s("code",[t._v("chart")]),t._v(" and "),s("code",[t._v("tooltip")]),t._v(". You can enable external tooltips in the global or chart configuration like so:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myPieChart "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chart")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pie'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tooltip")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable the on-canvas tooltip")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enabled")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n                "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("external")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tooltip Element")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tooltipEl "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chartjs-tooltip'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create element on first render")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        tooltipEl "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chartjs-tooltip'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<table></table>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Hide if no tooltip")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" tooltipModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tooltip"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("opacity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("opacity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set caret Position")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'above'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'below'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no-transform'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yAlign"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yAlign"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no-transform'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getBody")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("bodyItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" bodyItem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lines"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set Text")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" titleLines "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" bodyLines "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getBody"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerHtml "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<thead>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                        titleLines"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            innerHtml "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<tr><th>'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</th></tr>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        innerHtml "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</thead><tbody>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                        bodyLines"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" i")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" colors "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("labelColors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background:'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" colors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("backgroundColor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                            style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'; border-color:'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" colors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("borderColor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                            style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'; border-width: 2px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" span "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<span style=\"'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" style "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\">'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" body "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</span>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                            innerHtml "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<tr><td>'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" span "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</td></tr>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        innerHtml "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</tbody>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tableRoot "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'table'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                        tableRoot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" innerHtml"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("chart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canvas"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getBoundingClientRect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" bodyFont "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Chart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("helpers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toFont")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bodyFont"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n                    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Display, position, and set styles for font")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("opacity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'absolute'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("left "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("left "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pageXOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("caretX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("top "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("top "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pageYOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("caretY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bodyFont"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("padding "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("padding "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" tooltipModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("padding "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                    tooltipEl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pointerEvents "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("See "),s("RouterLink",{attrs:{to:"/samples/tooltip/html.html"}},[t._v("samples")]),t._v(" for examples on how to get started with external tooltips.")],1),t._v(" "),s("h2",{attrs:{id:"tooltip-model"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-model"}},[t._v("#")]),t._v(" Tooltip Model")]),t._v(" "),s("p",[t._v("The tooltip model contains parameters that can be used to render the tooltip.")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("chart")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Chart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The items that we are rendering in the tooltip. See Tooltip Item Interface section")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dataPoints")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" TooltipItem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Positioning")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("xAlign")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("yAlign")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// X and Y properties are the top left of the tooltip")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("x")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("y")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Where the tooltip points to")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("caretX")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("caretY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Body")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The body lines that need to be rendered")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Each object contains 3 parameters")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// before: string[] // lines of text before the line with the color square")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lines: string[], // lines of text to render as the main item with color square")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// after: string[], // lines of text to render after the main lines")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("body")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lines of text that appear after the title but before the body")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("beforeBody")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// line of text that appear after the body and before the footer")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("afterBody")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Title")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lines of text that form the title")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Footer")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lines of text that form the footer")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("footer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// colors to render for each item in body[]. This is the color of the squares in the tooltip")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("labelColors")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("labelTextColors")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0 opacity is a hidden tooltip")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tooltip options")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"custom-position-modes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-position-modes"}},[t._v("#")]),t._v(" Custom Position Modes")]),t._v(" "),s("p",[t._v("New modes can be defined by adding functions to the "),s("code",[t._v("Chart.Tooltip.positioners")]),t._v(" map.")]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Tooltip "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chart.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * Custom positioner\n * @function Tooltip.positioners.myCustomPositioner\n * @param elements {Chart.Element[]} the tooltip elements\n * @param eventPosition {Point} the position of the event in canvas coordinates\n * @returns {TooltipPosition} the tooltip position\n */")]),t._v("\nTooltip"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positioners"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("myCustomPositioner")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("elements"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" eventPosition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A reference to the tooltip model")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" tooltip "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("x")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("y")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You may also include xAlign and yAlign to override those tooltip options.")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Then, to use it...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tooltip")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCustomPositioner'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("See "),s("RouterLink",{attrs:{to:"/samples/tooltip/position.html"}},[t._v("samples")]),t._v(" for a more detailed example.")],1),t._v(" "),s("p",[t._v("If you're using TypeScript, you'll also need to register the new mode:")]),t._v(" "),s("div",{staticClass:"language-typescript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-typescript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("module")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chart.js'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TooltipPositionerMap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    myCustomPositioner"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" TooltipPositionerFunction"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChartType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);