diff --git a/docs/next/0d14b33b.68931fda.js b/docs/next/0d14b33b.68931fda.js new file mode 100644 index 0000000000..a64786beef --- /dev/null +++ b/docs/next/0d14b33b.68931fda.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{137:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return d})),a.d(t,"ExampleChart",(function(){return o})),a.d(t,"default",(function(){return j}));var n=a(1),b=a(9),r=a(0),c=a(200),l={title:"Bubble Chart"},i={id:"charts/bubble",title:"Bubble Chart",description:"A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.",source:"@site/docs/charts/bubble.mdx",permalink:"/docs/next/charts/bubble",editUrl:"https://github.com/chartjs/Chart.js/edit/master/docs/docs/charts/bubble.mdx",sidebar:"someSidebar",previous:{title:"Polar Area Chart",permalink:"/docs/next/charts/polar"},next:{title:"Scatter Chart",permalink:"/docs/next/charts/scatter"}},d=[{value:"Example Usage",id:"example-usage",children:[]},{value:"Dataset Properties",id:"dataset-properties",children:[{value:"General",id:"general",children:[]},{value:"Styling",id:"styling",children:[]},{value:"Interactions",id:"interactions",children:[]}]},{value:"Default Options",id:"default-options",children:[]},{value:"Data Structure",id:"data-structure",children:[]},{value:"Internal data format",id:"internal-data-format",children:[]}],o=function(){return Object(r.useEffect)((function(){new Chart(document.getElementById("chartjs-0").getContext("2d"),{type:"bubble",data:{datasets:[{label:"First Dataset",data:[{x:20,y:30,r:15},{x:40,y:10,r:10}],backgroundColor:"rgb(255, 99, 132)"}]}})})),Object(c.b)("div",{className:"chartjs-wrapper"},Object(c.b)("canvas",{id:"chartjs-0",className:"chartjs"}))},O={rightToc:d,ExampleChart:o};function j(e){var t=e.components,a=Object(b.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},O,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles."),Object(c.b)(o,{mdxType:"ExampleChart"}),Object(c.b)("h2",{id:"example-usage"},"Example Usage"),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-javascript"}),"// For a bubble chart\nvar myBubbleChart = new Chart(ctx, {\n type: 'bubble',\n data: data,\n options: options\n});\n")),Object(c.b)("h2",{id:"dataset-properties"},"Dataset Properties"),Object(c.b)("p",null,"The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way."),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Type"),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:"center"}),Object(c.b)("a",Object(n.a)({parentName:"th"},{href:"/docs/next/general/options#scriptable-options"}),"Scriptable")),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:"center"}),Object(c.b)("a",Object(n.a)({parentName:"th"},{href:"/docs/next/general/options#indexable-options"}),"Indexable")),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Default"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"backgroundColor"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"/docs/next/general/colors"}),Object(c.b)("inlineCode",{parentName:"a"},"Color"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"'rgba(0, 0, 0, 0.1)'"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"borderColor"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"/docs/next/general/colors"}),Object(c.b)("inlineCode",{parentName:"a"},"Color"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"'rgba(0, 0, 0, 0.1)'"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"borderWidth"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"3"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#general"}),Object(c.b)("inlineCode",{parentName:"a"},"clip"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("code",null,"number","|","object")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"undefined"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#data-structure"}),Object(c.b)("inlineCode",{parentName:"a"},"data"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"object[]")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("strong",{parentName:"td"},"required"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#interactions"}),Object(c.b)("inlineCode",{parentName:"a"},"hoverBackgroundColor"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"/docs/next/general/colors"}),Object(c.b)("inlineCode",{parentName:"a"},"Color"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"undefined"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#interactions"}),Object(c.b)("inlineCode",{parentName:"a"},"hoverBorderColor"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"/docs/next/general/colors"}),Object(c.b)("inlineCode",{parentName:"a"},"Color"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"undefined"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#interactions"}),Object(c.b)("inlineCode",{parentName:"a"},"hoverBorderWidth"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"1"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#interactions"}),Object(c.b)("inlineCode",{parentName:"a"},"hoverRadius"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"4"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#interactions"}),Object(c.b)("inlineCode",{parentName:"a"},"hitRadius"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"1"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#general"}),Object(c.b)("inlineCode",{parentName:"a"},"label"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"string")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"undefined"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#general"}),Object(c.b)("inlineCode",{parentName:"a"},"order"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"-"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"0"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"pointStyle"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"string")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"'circle'"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"rotation"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"0"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"#styling"}),Object(c.b)("inlineCode",{parentName:"a"},"radius"))),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"number")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:"center"}),"Yes"),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"3"))))),Object(c.b)("h3",{id:"general"},"General"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Description"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"clip")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. ",Object(c.b)("inlineCode",{parentName:"td"},"0")," = clip at chartArea. Clipping can also be configured per side: ",Object(c.b)("inlineCode",{parentName:"td"},"clip: {left: 5, top: false, right: -2, bottom: 0}"))),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"label")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"The label for the dataset which appears in the legend and tooltips.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"order")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"The drawing order of dataset. Also affects order for tooltip and legend.")))),Object(c.b)("h3",{id:"styling"},"Styling"),Object(c.b)("p",null,"The style of each bubble can be controlled with the following properties:"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Description"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"backgroundColor")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble background color.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"borderColor")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble border color.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"borderWidth")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble border width (in pixels).")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"pointStyle")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble ",Object(c.b)("a",Object(n.a)({parentName:"td"},{href:"../configuration/elements#point-styles"}),"shape style"),".")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"rotation")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble rotation (in degrees).")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"radius")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble radius (in pixels).")))),Object(c.b)("p",null,"All these values, if ",Object(c.b)("inlineCode",{parentName:"p"},"undefined"),", fallback to the associated ",Object(c.b)("a",Object(n.a)({parentName:"p"},{href:"/docs/next/configuration/elements#point-configuration"}),Object(c.b)("inlineCode",{parentName:"a"},"elements.point.*"))," options."),Object(c.b)("h3",{id:"interactions"},"Interactions"),Object(c.b)("p",null,"The interaction with each bubble can be controlled with the following properties:"),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(c.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Description"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"hoverBackgroundColor")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble background color when hovered.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"hoverBorderColor")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble border color when hovered.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"hoverBorderWidth")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble border width when hovered (in pixels).")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"hoverRadius")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble ",Object(c.b)("strong",{parentName:"td"},"additional")," radius when hovered (in pixels).")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(c.b)("inlineCode",{parentName:"td"},"hitRadius")),Object(c.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"bubble ",Object(c.b)("strong",{parentName:"td"},"additional")," radius for hit detection (in pixels).")))),Object(c.b)("p",null,"All these values, if ",Object(c.b)("inlineCode",{parentName:"p"},"undefined"),", fallback to the associated ",Object(c.b)("a",Object(n.a)({parentName:"p"},{href:"/docs/next/configuration/elements#point-configuration"}),Object(c.b)("inlineCode",{parentName:"a"},"elements.point.*"))," options."),Object(c.b)("h2",{id:"default-options"},"Default Options"),Object(c.b)("p",null,"We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at ",Object(c.b)("inlineCode",{parentName:"p"},"Chart.defaults.bubble"),"."),Object(c.b)("h2",{id:"data-structure"},"Data Structure"),Object(c.b)("p",null,"Bubble chart datasets need to contain a ",Object(c.b)("inlineCode",{parentName:"p"},"data")," array of points, each points represented by an object containing the following properties:"),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-javascript"}),"{\n // X Value\n x: number,\n\n // Y Value\n y: number,\n\n // Bubble radius in pixels (not scaled).\n r: number\n}\n")),Object(c.b)("p",null,Object(c.b)("strong",{parentName:"p"},"Important:")," the radius property, ",Object(c.b)("inlineCode",{parentName:"p"},"r")," is ",Object(c.b)("strong",{parentName:"p"},"not")," scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas."),Object(c.b)("h2",{id:"internal-data-format"},"Internal data format"),Object(c.b)("p",null,Object(c.b)("inlineCode",{parentName:"p"},"{x, y, _custom}")," where ",Object(c.b)("inlineCode",{parentName:"p"},"_custom")," is the radius."))}j.isMDXComponent=!0},200:function(e,t,a){"use strict";a.d(t,"a",(function(){return O})),a.d(t,"b",(function(){return m}));var n=a(0),b=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function c(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var d=b.a.createContext({}),o=function(e){var t=b.a.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},O=function(e){var t=o(e.components);return b.a.createElement(d.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,c=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),O=o(a),p=n,m=O["".concat(c,".").concat(p)]||O[p]||j[p]||r;return a?b.a.createElement(m,l({ref:t},d,{components:a})):b.a.createElement(m,l({ref:t},d))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,c=new Array(r);c[0]=p;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var d=2;d=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var d=b.a.createContext({}),o=function(e){var t=b.a.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},O=function(e){var t=o(e.components);return b.a.createElement(d.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,c=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),O=o(a),p=n,m=O["".concat(c,".").concat(p)]||O[p]||j[p]||r;return a?b.a.createElement(m,l({ref:t},d,{components:a})):b.a.createElement(m,l({ref:t},d))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,c=new Array(r);c[0]=p;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l.mdxType="string"==typeof e?e:n,c[1]=l;for(var d=2;d=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),p=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):c({},t,{},e)),n},d=function(e){var t=p(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},O=Object(r.forwardRef)((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=p(n),O=r,u=d["".concat(o,".").concat(O)]||d[O]||s[O]||i;return n?a.a.createElement(u,c({ref:t},b,{components:n})):a.a.createElement(u,c({ref:t},b))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=O;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),p=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):c({},t,{},e)),n},d=function(e){var t=p(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=Object(r.forwardRef)((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,o=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=r,m=d["".concat(o,".").concat(u)]||d[u]||s[u]||i;return n?a.a.createElement(m,c({ref:t},b,{components:n})):a.a.createElement(m,c({ref:t},b))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=u;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var b=2;b"," 0 on top.")))),Object(r.b)("p",null,"For function arguments, the function is passed a context object that is of the form:"),Object(r.b)("pre",null,Object(r.b)("code",Object(n.a)({parentName:"pre"},{className:"language-javscript"}),"{\n scale: // Scale object\n tick: // Tick object\n}\n")),Object(r.b)("h2",{id:"tick-configuration"},"Tick Configuration"),Object(r.b)("p",null,"The tick configuration is nested under the scale configuration in the ",Object(r.b)("inlineCode",{parentName:"p"},"ticks")," key. It defines options for the tick marks that are generated by the axis."),Object(r.b)("table",null,Object(r.b)("thead",{parentName:"table"},Object(r.b)("tr",{parentName:"thead"},Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Type"),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("a",Object(n.a)({parentName:"th"},{href:"/docs/VERSION/general/options#scriptable-options"}),"Scriptable")),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Default"))),Object(r.b)("tbody",{parentName:"table"},Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"callback")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"function")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"display")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"true"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontColor")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"Color")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"'#666'"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontFamily")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"\"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\""))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontSize")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"12"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontStyle")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"'normal'"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"lineHeight")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("code",null,"number","|","string")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"1.2"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"lineWidth")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"major")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"object")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"{}"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"padding")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"reverse")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"false"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"strokeStyle")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"``")),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"z")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(r.b)("h2",{id:"major-tick-configuration"},"Major Tick Configuration"),Object(r.b)("p",null,"The majorTick configuration is nested under the ticks configuration in the ",Object(r.b)("inlineCode",{parentName:"p"},"major")," key. It defines options for the major tick marks that are generated by the axis."),Object(r.b)("table",null,Object(r.b)("thead",{parentName:"table"},Object(r.b)("tr",{parentName:"thead"},Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Name"),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Type"),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Default"),Object(r.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Description"))),Object(r.b)("tbody",{parentName:"table"},Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"enabled")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"false")),Object(r.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"If true, major ticks are generated. A major tick will affect autoskipping and ",Object(r.b)("inlineCode",{parentName:"td"},"major")," will be defined on ticks in the scriptable options context.")))))}O.isMDXComponent=!0},200:function(e,t,a){"use strict";a.d(t,"a",(function(){return j})),a.d(t,"b",(function(){return m}));var n=a(0),b=a.n(n);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(b[a]=e[a])}return b}var d=b.a.createContext({}),O=function(e){var t=b.a.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):i({},t,{},e)),a},j=function(e){var t=O(e.components);return b.a.createElement(d.Provider,{value:t},e.children)},o={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,l=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),j=O(a),p=n,m=j["".concat(l,".").concat(p)]||j[p]||o[p]||r;return a?b.a.createElement(m,i({ref:t},d,{components:a})):b.a.createElement(m,i({ref:t},d))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,l=new Array(r);l[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var d=2;d"," 0 on top.")))),Object(r.b)("p",null,"For function arguments, the function is passed a context object that is of the form:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javscript"}),"{\n scale: // Scale object\n tick: // Tick object\n}\n")),Object(r.b)("h2",{id:"tick-configuration"},"Tick Configuration"),Object(r.b)("p",null,"The tick configuration is nested under the scale configuration in the ",Object(r.b)("inlineCode",{parentName:"p"},"ticks")," key. It defines options for the tick marks that are generated by the axis."),Object(r.b)("table",null,Object(r.b)("thead",{parentName:"table"},Object(r.b)("tr",{parentName:"thead"},Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("a",Object(a.a)({parentName:"th"},{href:"/docs/next/general/options#scriptable-options"}),"Scriptable")),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default"))),Object(r.b)("tbody",{parentName:"table"},Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"callback")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"function")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"display")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"true"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontColor")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"Color")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"'#666'"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontFamily")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"\"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\""))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontSize")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"12"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"fontStyle")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"'normal'"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"lineHeight")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("code",null,"number","|","string")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"1.2"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"lineWidth")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"major")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"object")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"{}"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"padding")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"reverse")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"false"))),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"strokeStyle")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"string")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Yes"),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"``")),Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"z")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"number")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"0")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}))))),Object(r.b)("h2",{id:"major-tick-configuration"},"Major Tick Configuration"),Object(r.b)("p",null,"The majorTick configuration is nested under the ticks configuration in the ",Object(r.b)("inlineCode",{parentName:"p"},"major")," key. It defines options for the major tick marks that are generated by the axis."),Object(r.b)("table",null,Object(r.b)("thead",{parentName:"table"},Object(r.b)("tr",{parentName:"thead"},Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default"),Object(r.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(r.b)("tbody",{parentName:"table"},Object(r.b)("tr",{parentName:"tbody"},Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"enabled")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"boolean")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(r.b)("inlineCode",{parentName:"td"},"false")),Object(r.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"If true, major ticks are generated. A major tick will affect autoskipping and ",Object(r.b)("inlineCode",{parentName:"td"},"major")," will be defined on ticks in the scriptable options context.")))))}j.isMDXComponent=!0},200:function(e,t,n){"use strict";n.d(t,"a",(function(){return o})),n.d(t,"b",(function(){return m}));var a=n(0),b=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(b[n]=e[n]);return b}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(b[n]=e[n])}return b}var d=b.a.createContext({}),j=function(e){var t=b.a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},o=function(e){var t=j(e.components);return b.a.createElement(d.Provider,{value:t},e.children)},O={inlineCode:"code",wrapper:function(e){var t=e.children;return b.a.createElement(b.a.Fragment,{},t)}},p=Object(a.forwardRef)((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),o=j(n),p=a,m=o["".concat(l,".").concat(p)]||o[p]||O[p]||r;return n?b.a.createElement(m,i({ref:t},d,{components:n})):b.a.createElement(m,i({ref:t},d))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,l=new Array(r);l[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var d=2;d=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var s=n.a.createContext({}),p=function(e){var r=n.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):c({},r,{},e)),t},u=function(e){var r=p(e.components);return n.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return n.a.createElement(n.a.Fragment,{},r)}},f=Object(a.forwardRef)((function(e,r){var t=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),f=a,b=u["".concat(o,".").concat(f)]||u[f]||d[f]||i;return t?n.a.createElement(b,c({ref:r},s,{components:t})):n.a.createElement(b,c({ref:r},s))}));function b(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var i=t.length,o=new Array(i);o[0]=f;var c={};for(var l in r)hasOwnProperty.call(r,l)&&(c[l]=r[l]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var s=2;s=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),p=function(e){var r=a.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):c({},r,{},e)),t},u=function(e){var r=p(e.components);return a.a.createElement(s.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},f=Object(n.forwardRef)((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),f=n,b=u["".concat(o,".").concat(f)]||u[f]||d[f]||i;return t?a.a.createElement(b,c({ref:r},s,{components:t})):a.a.createElement(b,c({ref:r},s))}));function b(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=f;var c={};for(var l in r)hasOwnProperty.call(r,l)&&(c[l]=r[l]);c.originalType=e,c.mdxType="string"==typeof e?e:n,o[1]=c;for(var s=2;s\n')),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-javascript"}),"// Any of the following formats may be used\nvar ctx = document.getElementById('myChart');\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar ctx = $('#myChart');\nvar ctx = 'myChart';\n")),Object(o.b)("p",null,"Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!"),Object(o.b)("p",null,"The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-html"}),"\n - + Page Not Found | Chart.js - + - + - + - + - + - + - + - + - +
-

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + - + - + - + - + - + - + diff --git a/docs/next/46cc0bae.817a5507.js b/docs/next/46cc0bae.817a5507.js deleted file mode 100644 index 46aac34617..0000000000 --- a/docs/next/46cc0bae.817a5507.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{159:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return s})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return p}));var a=r(1),n=r(9),o=(r(0),r(200)),s={title:"Developers"},l={id:"developers/README",title:"Developers",description:"Developer features allow extending and enhancing Chart.js in many different ways.",source:"@site/docs/developers/README.md",permalink:"/docs/VERSION/developers/README",editUrl:"https://github.com/chartjs/Chart.js/edit/master/docs/docs/developers/README.md",sidebar:"someSidebar",previous:{title:"Styling",permalink:"/docs/VERSION/axes/styling"},next:{title:"API",permalink:"/docs/VERSION/developers/api"}},c=[{value:"Latest resources",id:"latest-resources",children:[]},{value:"Development releases",id:"development-releases",children:[]},{value:"Browser support",id:"browser-support",children:[]},{value:"Previous versions",id:"previous-versions",children:[]}],i={rightToc:c};function p(e){var t=e.components,r=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},i,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Developer features allow extending and enhancing Chart.js in many different ways."),Object(o.b)("h2",{id:"latest-resources"},"Latest resources"),Object(o.b)("p",null,"Latest documentation and samples, including unreleased features, are available at:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://www.chartjs.org/docs/master/"}),"https://www.chartjs.org/docs/master/")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://www.chartjs.org/samples/master/"}),"https://www.chartjs.org/samples/master/"))),Object(o.b)("h2",{id:"development-releases"},"Development releases"),Object(o.b)("p",null,"Latest builds are available for testing at:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://www.chartjs.org/dist/master/Chart.js"}),"https://www.chartjs.org/dist/master/Chart.js")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://www.chartjs.org/dist/master/Chart.min.js"}),"https://www.chartjs.org/dist/master/Chart.min.js"))),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"Note: Development builds are currently only available via HTTP, so in order to include them in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://jsfiddle.net"}),"JSFiddle")," or ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://codepen.io"}),"CodePen"),", you need to access these tools via HTTP as well.")),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"WARNING: Development builds MUST not be used for production purposes or as replacement for CDN.")),Object(o.b)("h2",{id:"browser-support"},"Browser support"),Object(o.b)("p",null,"Chart.js offers support for the following browsers:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Chrome 50+"),Object(o.b)("li",{parentName:"ul"},"Firefox 45+"),Object(o.b)("li",{parentName:"ul"},"Internet Explorer 11"),Object(o.b)("li",{parentName:"ul"},"Edge 14+"),Object(o.b)("li",{parentName:"ul"},"Safari 9+")),Object(o.b)("p",null,"Browser support for the canvas element is available in all modern & major mobile browsers. ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://caniuse.com/#feat=canvas"}),"CanIUse")),Object(o.b)("p",null,"Thanks to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://browserstack.com"}),"BrowserStack")," for allowing our team to test on thousands of browsers."),Object(o.b)("h2",{id:"previous-versions"},"Previous versions"),Object(o.b)("p",null,"Version 2 has a completely different API than earlier versions."),Object(o.b)("p",null,"Most earlier version options have current equivalents or are the same."),Object(o.b)("p",null,"Please use the documentation that is available on ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.chartjs.org/docs/"}),"chartjs.org")," for the current version of Chart.js."),Object(o.b)("p",null,"Please note - documentation for previous versions are available on the GitHub repo."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/chartjs/Chart.js/tree/v1.1.1/docs"}),"1.x Documentation"))))}p.isMDXComponent=!0},200:function(e,t,r){"use strict";r.d(t,"a",(function(){return b})),r.d(t,"b",(function(){return d}));var a=r(0),n=r.n(a);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=n.a.createContext({}),p=function(e){var t=n.a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l({},t,{},e)),r},b=function(e){var t=p(e.components);return n.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},m=Object(a.forwardRef)((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,i=c(e,["components","mdxType","originalType","parentName"]),b=p(r),m=a,d=b["".concat(s,".").concat(m)]||b[m]||u[m]||o;return r?n.a.createElement(d,l({ref:t},i,{components:r})):n.a.createElement(d,l({ref:t},i))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,s[1]=l;for(var i=2;i=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=a.a.createContext({}),p=function(e){var t=a.a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l({},t,{},e)),r},b=function(e){var t=p(e.components);return a.a.createElement(i.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=Object(n.forwardRef)((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,s=e.parentName,i=c(e,["components","mdxType","originalType","parentName"]),b=p(r),m=n,d=b["".concat(s,".").concat(m)]||b[m]||u[m]||o;return r?a.a.createElement(d,l({ref:t},i,{components:r})):a.a.createElement(d,l({ref:t},i))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,s=new Array(o);s[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,s[1]=l;for(var i=2;i=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):o({},t,{},e)),a},d=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),d=s(a),u=n,m=d["".concat(l,".").concat(u)]||d[u]||p[u]||i;return a?r.a.createElement(m,o({ref:t},b,{components:a})):r.a.createElement(m,o({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var b=2;b=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),a=t;return e&&(a="function"==typeof e?e(t):o({},t,{},e)),a},d=function(e){var t=s(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},u=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,b=c(e,["components","mdxType","originalType","parentName"]),d=s(a),u=n,m=d["".concat(l,".").concat(u)]||d[u]||p[u]||i;return a?r.a.createElement(m,o({ref:t},b,{components:a})):r.a.createElement(m,o({ref:t},b))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,l=new Array(i);l[0]=u;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:n,l[1]=o;for(var b=2;b=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var o=i.a.createContext({}),d=function(e){var t=i.a.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},s=function(e){var t=d(e.components);return i.a.createElement(o.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},O=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,b=e.parentName,o=c(e,["components","mdxType","originalType","parentName"]),s=d(a),O=n,j=s["".concat(b,".").concat(O)]||s[O]||p[O]||r;return a?i.a.createElement(j,l({ref:t},o,{components:a})):i.a.createElement(j,l({ref:t},o))}));function j(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,b=new Array(r);b[0]=O;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,b[1]=l;for(var o=2;o=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var o=i.a.createContext({}),d=function(e){var t=i.a.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},s=function(e){var t=d(e.components);return i.a.createElement(o.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},O=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,r=e.originalType,b=e.parentName,o=c(e,["components","mdxType","originalType","parentName"]),s=d(a),O=n,j=s["".concat(b,".").concat(O)]||s[O]||p[O]||r;return a?i.a.createElement(j,l({ref:t},o,{components:a})):i.a.createElement(j,l({ref:t},o))}));function j(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,b=new Array(r);b[0]=O;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,b[1]=l;for(var o=2;o=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var d=r.a.createContext({}),o=function(e){var t=r.a.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},p=function(e){var t=o(e.components);return r.a.createElement(d.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,i=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),p=o(a),j=n,O=p["".concat(i,".").concat(j)]||p[j]||m[j]||b;return a?r.a.createElement(O,l({ref:t},d,{components:a})):r.a.createElement(O,l({ref:t},d))}));function O(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,i=new Array(b);i[0]=j;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var d=2;d=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var d=r.a.createContext({}),o=function(e){var t=r.a.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):l({},t,{},e)),a},p=function(e){var t=o(e.components);return r.a.createElement(d.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},j=Object(n.forwardRef)((function(e,t){var a=e.components,n=e.mdxType,b=e.originalType,i=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),p=o(a),j=n,s=p["".concat(i,".").concat(j)]||p[j]||m[j]||b;return a?r.a.createElement(s,l({ref:t},d,{components:a})):r.a.createElement(s,l({ref:t},d))}));function s(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var b=a.length,i=new Array(b);i[0]=j;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var d=2;d=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var o=n.a.createContext({}),p=function(e){var t=n.a.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):i({},t,{},e)),a},b=function(e){var t=p(e.components);return n.a.createElement(o.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=Object(r.forwardRef)((function(e,t){var a=e.components,r=e.mdxType,c=e.originalType,s=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),b=p(a),d=r,m=b["".concat(s,".").concat(d)]||b[d]||j[d]||c;return a?n.a.createElement(m,i({ref:t},o,{components:a})):n.a.createElement(m,i({ref:t},o))}));function m(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=a.length,s=new Array(c);s[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var o=2;o=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var o=n.a.createContext({}),p=function(e){var t=n.a.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):i({},t,{},e)),a},b=function(e){var t=p(e.components);return n.a.createElement(o.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=Object(r.forwardRef)((function(e,t){var a=e.components,r=e.mdxType,c=e.originalType,s=e.parentName,o=l(e,["components","mdxType","originalType","parentName"]),b=p(a),d=r,m=b["".concat(s,".").concat(d)]||b[d]||j[d]||c;return a?n.a.createElement(m,i({ref:t},o,{components:a})):n.a.createElement(m,i({ref:t},o))}));function m(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var c=a.length,s=new Array(c);s[0]=d;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,s[1]=i;for(var o=2;o=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i({},t,{},e)),r},u=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=Object(a.forwardRef)((function(e,t){var r=e.components,a=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=a,h=u["".concat(o,".").concat(d)]||u[d]||b[d]||c;return r?n.a.createElement(h,i({ref:t},p,{components:r})):n.a.createElement(h,i({ref:t},p))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var p=2;p=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=n.a.createContext({}),l=function(e){var t=n.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i({},t,{},e)),r},u=function(e){var t=l(e.components);return n.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},d=Object(a.forwardRef)((function(e,t){var r=e.components,a=e.mdxType,c=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),d=a,h=u["".concat(o,".").concat(d)]||u[d]||b[d]||c;return r?n.a.createElement(h,i({ref:t},p,{components:r})):n.a.createElement(h,i({ref:t},p))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var c=r.length,o=new Array(c);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var p=2;p {\n dataset.data.push(data);\n });\n chart.update();\n}\n\nfunction removeData(chart) {\n chart.data.labels.pop();\n chart.data.datasets.forEach((dataset) => {\n dataset.data.pop();\n });\n chart.update();\n}\n")),Object(o.b)("h2",{id:"updating-options"},"Updating Options"),Object(o.b)("p",null,"To update the options, mutating the options property in place or passing in a new options object are supported."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js."),Object(o.b)("li",{parentName:"ul"},"If created as a new object, it would be like creating a new chart with the options - old options would be discarded.")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateConfigByMutating(chart) {\n chart.options.title.text = 'new title';\n chart.update();\n}\n\nfunction updateConfigAsNewObject(chart) {\n chart.options = {\n responsive: true,\n title: {\n display: true,\n text: 'Chart.js'\n },\n scales: {\n x: {\n display: true\n },\n y: {\n display: true\n }\n }\n };\n chart.update();\n}\n")),Object(o.b)("p",null,"Scales can be updated separately without changing other options.\nTo update the scales, pass in an object containing all the customization including those unchanged ones."),Object(o.b)("p",null,"Variables referencing any one from ",Object(o.b)("inlineCode",{parentName:"p"},"chart.scales")," would be lost after updating scales with a new ",Object(o.b)("inlineCode",{parentName:"p"},"id")," or the changed ",Object(o.b)("inlineCode",{parentName:"p"},"type"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateScales(chart) {\n var xScale = chart.scales.x;\n var yScale = chart.scales.y;\n chart.options.scales = {\n newId: {\n display: true\n },\n y: {\n display: true,\n type: 'logarithmic'\n }\n };\n chart.update();\n // need to update the reference\n xScale = chart.scales.newId;\n yScale = chart.scales.y;\n}\n")),Object(o.b)("p",null,"You can also update a specific scale either by its id."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateScale(chart) {\n chart.options.scales.y = {\n type: 'logarithmic'\n };\n chart.update();\n}\n")),Object(o.b)("p",null,"Code sample for updating options can be found in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"../../samples/scales/toggle-scale-type.html"}),"toggle-scale-type.html"),"."),Object(o.b)("h2",{id:"preventing-animations"},"Preventing Animations"),Object(o.b)("p",null,"Sometimes when a chart updates, you may not want an animation. To achieve this you can call ",Object(o.b)("inlineCode",{parentName:"p"},"update")," with ",Object(o.b)("inlineCode",{parentName:"p"},"'none'")," as mode."))}l.isMDXComponent=!0},200:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return h}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),l=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},d=function(e){var t=l(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=Object(a.forwardRef)((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(n),b=a,h=d["".concat(c,".").concat(b)]||d[b]||u[b]||o;return n?r.a.createElement(h,i({ref:t},s,{components:n})):r.a.createElement(h,i({ref:t},s))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var s=2;s {\n dataset.data.push(data);\n });\n chart.update();\n}\n\nfunction removeData(chart) {\n chart.data.labels.pop();\n chart.data.datasets.forEach((dataset) => {\n dataset.data.pop();\n });\n chart.update();\n}\n")),Object(o.b)("h2",{id:"updating-options"},"Updating Options"),Object(o.b)("p",null,"To update the options, mutating the options property in place or passing in a new options object are supported."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js."),Object(o.b)("li",{parentName:"ul"},"If created as a new object, it would be like creating a new chart with the options - old options would be discarded.")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateConfigByMutating(chart) {\n chart.options.title.text = 'new title';\n chart.update();\n}\n\nfunction updateConfigAsNewObject(chart) {\n chart.options = {\n responsive: true,\n title: {\n display: true,\n text: 'Chart.js'\n },\n scales: {\n x: {\n display: true\n },\n y: {\n display: true\n }\n }\n };\n chart.update();\n}\n")),Object(o.b)("p",null,"Scales can be updated separately without changing other options.\nTo update the scales, pass in an object containing all the customization including those unchanged ones."),Object(o.b)("p",null,"Variables referencing any one from ",Object(o.b)("inlineCode",{parentName:"p"},"chart.scales")," would be lost after updating scales with a new ",Object(o.b)("inlineCode",{parentName:"p"},"id")," or the changed ",Object(o.b)("inlineCode",{parentName:"p"},"type"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateScales(chart) {\n var xScale = chart.scales.x;\n var yScale = chart.scales.y;\n chart.options.scales = {\n newId: {\n display: true\n },\n y: {\n display: true,\n type: 'logarithmic'\n }\n };\n chart.update();\n // need to update the reference\n xScale = chart.scales.newId;\n yScale = chart.scales.y;\n}\n")),Object(o.b)("p",null,"You can also update a specific scale either by its id."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function updateScale(chart) {\n chart.options.scales.y = {\n type: 'logarithmic'\n };\n chart.update();\n}\n")),Object(o.b)("p",null,"Code sample for updating options can be found in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"../../samples/scales/toggle-scale-type.html"}),"toggle-scale-type.html"),"."),Object(o.b)("h2",{id:"preventing-animations"},"Preventing Animations"),Object(o.b)("p",null,"Sometimes when a chart updates, you may not want an animation. To achieve this you can call ",Object(o.b)("inlineCode",{parentName:"p"},"update")," with ",Object(o.b)("inlineCode",{parentName:"p"},"'none'")," as mode."))}l.isMDXComponent=!0},200:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return h}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=r.a.createContext({}),l=function(e){var t=r.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},d=function(e){var t=l(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},b=Object(a.forwardRef)((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(n),b=a,h=d["".concat(c,".").concat(b)]||d[b]||u[b]||o;return n?r.a.createElement(h,i({ref:t},s,{components:n})):r.a.createElement(h,i({ref:t},s))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,c=new Array(o);c[0]=b;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:a,c[1]=i;for(var s=2;s=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),p=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},d=function(e){var t=p(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=Object(r.forwardRef)((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=r,O=d["".concat(c,".").concat(u)]||d[u]||s[u]||o;return n?a.a.createElement(O,i({ref:t},b,{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=u;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var b=a.a.createContext({}),p=function(e){var t=a.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},d=function(e){var t=p(e.components);return a.a.createElement(b.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},u=Object(r.forwardRef)((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,b=l(e,["components","mdxType","originalType","parentName"]),d=p(n),u=r,O=d["".concat(c,".").concat(u)]||d[u]||s[u]||o;return n?a.a.createElement(O,i({ref:t},b,{components:n})):a.a.createElement(O,i({ref:t},b))}));function O(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=u;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var b=2;b p.id === 'tooltip');\ntooltipPlugin.positioners.custom = function(elements, eventPosition) {\n /** @type {Tooltip} */\n var tooltip = this;\n\n /* ... */\n\n return {\n x: 0,\n y: 0\n };\n};\n")),Object(b.b)("h3",{id:"alignment"},"Alignment"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"titleAlign"),", ",Object(b.b)("inlineCode",{parentName:"p"},"bodyAlign")," and ",Object(b.b)("inlineCode",{parentName:"p"},"footerAlign")," options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported."),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'left'")," (default)"),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'right'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'center'"))),Object(b.b)("p",null,"These options are only applied to text lines. Color boxes are always aligned to the left edge."),Object(b.b)("h3",{id:"sort-callback"},"Sort Callback"),Object(b.b)("p",null,"Allows sorting of ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip items"),". Must implement at minimum a function that can be passed to ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"}),"Array.prototype.sort"),". This function can also accept a third parameter that is the data object passed to the chart."),Object(b.b)("h3",{id:"filter-callback"},"Filter Callback"),Object(b.b)("p",null,"Allows filtering of ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip items"),". Must implement at minimum a function that can be passed to ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"}),"Array.prototype.filter"),". This function can also accept a second parameter that is the data object passed to the chart."),Object(b.b)("h2",{id:"tooltip-callbacks"},"Tooltip Callbacks"),Object(b.b)("p",null,"The tooltip label configuration is nested below the tooltip configuration using the ",Object(b.b)("inlineCode",{parentName:"p"},"callbacks")," key. The tooltip has the following callbacks for providing text. For all functions, ",Object(b.b)("inlineCode",{parentName:"p"},"this")," will be the tooltip object created from the ",Object(b.b)("inlineCode",{parentName:"p"},"Tooltip")," constructor."),Object(b.b)("p",null,"All functions are called with the same arguments: a ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip item")," and the ",Object(b.b)("inlineCode",{parentName:"p"},"data")," object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Arguments"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeTitle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the text to render before the title.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"title")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render as the title of the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterTitle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after the title.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeBody")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before the body section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeLabel")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before an individual label. This will be called for each item in the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"label")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render for an individual item in the tooltip. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#label-callback"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"labelColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, Chart")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the colors to render for the tooltip item. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#label-color-callback"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"labelTextColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, Chart")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the colors for the text of the label for the tooltip item.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterLabel")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after an individual label.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterBody")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after the body section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeFooter")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before the footer section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"footer")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render as the footer of the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterFooter")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Text to render after the footer section.")))),Object(b.b)("h3",{id:"label-callback"},"Label Callback"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"label")," callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a ",Object(b.b)("inlineCode",{parentName:"p"},"'$'")," before every row."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var chart = new Chart(ctx, {\n type: 'line',\n data: data,\n options: {\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n if (!helpers.isNullOrUndef(tooltipItem.value)) {\n label += '$' + tooltipItem.value;\n }\n return label;\n }\n }\n }\n }\n});\n")),Object(b.b)("h3",{id:"label-color-callback"},"Label Color Callback"),Object(b.b)("p",null,"For example, to return a red box for each item in the tooltip you could do:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var chart = new Chart(ctx, {\n type: 'line',\n data: data,\n options: {\n tooltips: {\n callbacks: {\n labelColor: function(tooltipItem, chart) {\n return {\n borderColor: 'rgb(255, 0, 0)',\n backgroundColor: 'rgb(255, 0, 0)'\n };\n },\n labelTextColor: function(tooltipItem, chart) {\n return '#543453';\n }\n }\n }\n }\n});\n")),Object(b.b)("h3",{id:"tooltip-item-interface"},"Tooltip Item Interface"),Object(b.b)("p",null,"The tooltip items passed to the tooltip callbacks implement the following interface."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"{\n // Label for the tooltip\n label: string,\n\n // Value for the tooltip\n value: string,\n\n // Index of the dataset the item comes from\n datasetIndex: number,\n\n // Index of this data item in the dataset\n index: number\n}\n")),Object(b.b)("h2",{id:"external-custom-tooltips"},"External (Custom) Tooltips"),Object(b.b)("p",null,"Custom 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 oncanvas one. You can enable custom tooltips in the global or chart configuration like so:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var myPieChart = new Chart(ctx, {\n type: 'pie',\n data: data,\n options: {\n tooltips: {\n // Disable the on-canvas tooltip\n enabled: false,\n\n custom: function(tooltipModel) {\n // Tooltip Element\n var tooltipEl = document.getElementById('chartjs-tooltip');\n\n // Create element on first render\n if (!tooltipEl) {\n tooltipEl = document.createElement('div');\n tooltipEl.id = 'chartjs-tooltip';\n tooltipEl.innerHTML = '
';\n document.body.appendChild(tooltipEl);\n }\n\n // Hide if no tooltip\n if (tooltipModel.opacity === 0) {\n tooltipEl.style.opacity = 0;\n return;\n }\n\n // Set caret Position\n tooltipEl.classList.remove('above', 'below', 'no-transform');\n if (tooltipModel.yAlign) {\n tooltipEl.classList.add(tooltipModel.yAlign);\n } else {\n tooltipEl.classList.add('no-transform');\n }\n\n function getBody(bodyItem) {\n return bodyItem.lines;\n }\n\n // Set Text\n if (tooltipModel.body) {\n var titleLines = tooltipModel.title || [];\n var bodyLines = tooltipModel.body.map(getBody);\n\n var innerHtml = '';\n\n titleLines.forEach(function(title) {\n innerHtml += '' + title + '';\n });\n innerHtml += '';\n\n bodyLines.forEach(function(body, i) {\n var colors = tooltipModel.labelColors[i];\n var style = 'background:' + colors.backgroundColor;\n style += '; border-color:' + colors.borderColor;\n style += '; border-width: 2px';\n var span = '';\n innerHtml += '' + span + body + '';\n });\n innerHtml += '';\n\n var tableRoot = tooltipEl.querySelector('table');\n tableRoot.innerHTML = innerHtml;\n }\n\n // `this` will be the overall tooltip\n var position = this._chart.canvas.getBoundingClientRect();\n\n // Display, position, and set styles for font\n tooltipEl.style.opacity = 1;\n tooltipEl.style.position = 'absolute';\n tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';\n tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';\n tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;\n tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';\n tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;\n tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';\n tooltipEl.style.pointerEvents = 'none';\n }\n }\n }\n});\n")),Object(b.b)("p",null,"See ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.chartjs.org/samples/"}),"samples")," for examples on how to get started with custom tooltips."),Object(b.b)("h2",{id:"tooltip-model"},"Tooltip Model"),Object(b.b)("p",null,"The tooltip model contains parameters that can be used to render the tooltip."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"{\n // The items that we are rendering in the tooltip. See Tooltip Item Interface section\n dataPoints: TooltipItem[],\n\n // Positioning\n xPadding: number,\n yPadding: number,\n xAlign: string,\n yAlign: string,\n\n // X and Y properties are the top left of the tooltip\n x: number,\n y: number,\n width: number,\n height: number,\n // Where the tooltip points to\n caretX: number,\n caretY: number,\n\n // Body\n // The body lines that need to be rendered\n // Each object contains 3 parameters\n // before: string[] // lines of text before the line with the color square\n // lines: string[], // lines of text to render as the main item with color square\n // after: string[], // lines of text to render after the main lines\n body: object[],\n // lines of text that appear after the title but before the body\n beforeBody: string[],\n // line of text that appear after the body and before the footer\n afterBody: string[],\n bodyFontColor: Color,\n _bodyFontFamily: string,\n _bodyFontStyle: string,\n _bodyAlign: string,\n bodyFontSize: number,\n bodySpacing: number,\n\n // Title\n // lines of text that form the title\n title: string[],\n titleFontColor: Color,\n _titleFontFamily: string,\n _titleFontStyle: string,\n titleFontSize: number,\n _titleAlign: string,\n titleSpacing: number,\n titleMarginBottom: number,\n\n // Footer\n // lines of text that form the footer\n footer: string[],\n footerFontColor: Color,\n _footerFontFamily: string,\n _footerFontStyle: string,\n footerFontSize: number,\n _footerAlign: string,\n footerSpacing: number,\n footerMarginTop: number,\n\n // Appearance\n caretSize: number,\n caretPadding: number,\n cornerRadius: number,\n backgroundColor: Color,\n\n // colors to render for each item in body[]. This is the color of the squares in the tooltip\n labelColors: Color[],\n labelTextColors: Color[],\n\n // 0 opacity is a hidden tooltip\n opacity: number,\n multiKeyBackground: Color,\n displayColors: boolean,\n borderColor: Color,\n borderWidth: number\n}\n")))}d.isMDXComponent=!0},200:function(t,e,n){"use strict";n.d(e,"a",(function(){return p})),n.d(e,"b",(function(){return m}));var a=n(0),l=n.n(a);function b(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function o(t){for(var e=1;e=0||(l[n]=t[n]);return l}(t,e);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(l[n]=t[n])}return l}var c=l.a.createContext({}),d=function(t){var e=l.a.useContext(c),n=e;return t&&(n="function"==typeof t?t(e):o({},e,{},t)),n},p=function(t){var e=d(t.components);return l.a.createElement(c.Provider,{value:e},t.children)},j={inlineCode:"code",wrapper:function(t){var e=t.children;return l.a.createElement(l.a.Fragment,{},e)}},O=Object(a.forwardRef)((function(t,e){var n=t.components,a=t.mdxType,b=t.originalType,r=t.parentName,c=i(t,["components","mdxType","originalType","parentName"]),p=d(n),O=a,m=p["".concat(r,".").concat(O)]||p[O]||j[O]||b;return n?l.a.createElement(m,o({ref:e},c,{components:n})):l.a.createElement(m,o({ref:e},c))}));function m(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var b=n.length,r=new Array(b);r[0]=O;var o={};for(var i in e)hasOwnProperty.call(e,i)&&(o[i]=e[i]);o.originalType=t,o.mdxType="string"==typeof t?t:a,r[1]=o;for(var c=2;c p.id === 'tooltip');\ntooltipPlugin.positioners.custom = function(elements, eventPosition) {\n /** @type {Tooltip} */\n var tooltip = this;\n\n /* ... */\n\n return {\n x: 0,\n y: 0\n };\n};\n")),Object(b.b)("h3",{id:"alignment"},"Alignment"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"titleAlign"),", ",Object(b.b)("inlineCode",{parentName:"p"},"bodyAlign")," and ",Object(b.b)("inlineCode",{parentName:"p"},"footerAlign")," options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported."),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'left'")," (default)"),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'right'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'center'"))),Object(b.b)("p",null,"These options are only applied to text lines. Color boxes are always aligned to the left edge."),Object(b.b)("h3",{id:"sort-callback"},"Sort Callback"),Object(b.b)("p",null,"Allows sorting of ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip items"),". Must implement at minimum a function that can be passed to ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"}),"Array.prototype.sort"),". This function can also accept a third parameter that is the data object passed to the chart."),Object(b.b)("h3",{id:"filter-callback"},"Filter Callback"),Object(b.b)("p",null,"Allows filtering of ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip items"),". Must implement at minimum a function that can be passed to ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"}),"Array.prototype.filter"),". This function can also accept a second parameter that is the data object passed to the chart."),Object(b.b)("h2",{id:"tooltip-callbacks"},"Tooltip Callbacks"),Object(b.b)("p",null,"The tooltip label configuration is nested below the tooltip configuration using the ",Object(b.b)("inlineCode",{parentName:"p"},"callbacks")," key. The tooltip has the following callbacks for providing text. For all functions, ",Object(b.b)("inlineCode",{parentName:"p"},"this")," will be the tooltip object created from the ",Object(b.b)("inlineCode",{parentName:"p"},"Tooltip")," constructor."),Object(b.b)("p",null,"All functions are called with the same arguments: a ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"#tooltip-item-interface"}),"tooltip item")," and the ",Object(b.b)("inlineCode",{parentName:"p"},"data")," object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Arguments"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeTitle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the text to render before the title.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"title")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render as the title of the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterTitle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after the title.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeBody")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before the body section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeLabel")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before an individual label. This will be called for each item in the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"label")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render for an individual item in the tooltip. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#label-callback"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"labelColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, Chart")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the colors to render for the tooltip item. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#label-color-callback"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"labelTextColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, Chart")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns the colors for the text of the label for the tooltip item.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterLabel")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem, object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after an individual label.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterBody")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render after the body section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"beforeFooter")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render before the footer section.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"footer")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Returns text to render as the footer of the tooltip.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"afterFooter")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"TooltipItem[], object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Text to render after the footer section.")))),Object(b.b)("h3",{id:"label-callback"},"Label Callback"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"label")," callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a ",Object(b.b)("inlineCode",{parentName:"p"},"'$'")," before every row."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var chart = new Chart(ctx, {\n type: 'line',\n data: data,\n options: {\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n if (!helpers.isNullOrUndef(tooltipItem.value)) {\n label += '$' + tooltipItem.value;\n }\n return label;\n }\n }\n }\n }\n});\n")),Object(b.b)("h3",{id:"label-color-callback"},"Label Color Callback"),Object(b.b)("p",null,"For example, to return a red box for each item in the tooltip you could do:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var chart = new Chart(ctx, {\n type: 'line',\n data: data,\n options: {\n tooltips: {\n callbacks: {\n labelColor: function(tooltipItem, chart) {\n return {\n borderColor: 'rgb(255, 0, 0)',\n backgroundColor: 'rgb(255, 0, 0)'\n };\n },\n labelTextColor: function(tooltipItem, chart) {\n return '#543453';\n }\n }\n }\n }\n});\n")),Object(b.b)("h3",{id:"tooltip-item-interface"},"Tooltip Item Interface"),Object(b.b)("p",null,"The tooltip items passed to the tooltip callbacks implement the following interface."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"{\n // Label for the tooltip\n label: string,\n\n // Value for the tooltip\n value: string,\n\n // Index of the dataset the item comes from\n datasetIndex: number,\n\n // Index of this data item in the dataset\n index: number\n}\n")),Object(b.b)("h2",{id:"external-custom-tooltips"},"External (Custom) Tooltips"),Object(b.b)("p",null,"Custom 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 oncanvas one. You can enable custom tooltips in the global or chart configuration like so:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var myPieChart = new Chart(ctx, {\n type: 'pie',\n data: data,\n options: {\n tooltips: {\n // Disable the on-canvas tooltip\n enabled: false,\n\n custom: function(tooltipModel) {\n // Tooltip Element\n var tooltipEl = document.getElementById('chartjs-tooltip');\n\n // Create element on first render\n if (!tooltipEl) {\n tooltipEl = document.createElement('div');\n tooltipEl.id = 'chartjs-tooltip';\n tooltipEl.innerHTML = '
';\n document.body.appendChild(tooltipEl);\n }\n\n // Hide if no tooltip\n if (tooltipModel.opacity === 0) {\n tooltipEl.style.opacity = 0;\n return;\n }\n\n // Set caret Position\n tooltipEl.classList.remove('above', 'below', 'no-transform');\n if (tooltipModel.yAlign) {\n tooltipEl.classList.add(tooltipModel.yAlign);\n } else {\n tooltipEl.classList.add('no-transform');\n }\n\n function getBody(bodyItem) {\n return bodyItem.lines;\n }\n\n // Set Text\n if (tooltipModel.body) {\n var titleLines = tooltipModel.title || [];\n var bodyLines = tooltipModel.body.map(getBody);\n\n var innerHtml = '';\n\n titleLines.forEach(function(title) {\n innerHtml += '' + title + '';\n });\n innerHtml += '';\n\n bodyLines.forEach(function(body, i) {\n var colors = tooltipModel.labelColors[i];\n var style = 'background:' + colors.backgroundColor;\n style += '; border-color:' + colors.borderColor;\n style += '; border-width: 2px';\n var span = '';\n innerHtml += '' + span + body + '';\n });\n innerHtml += '';\n\n var tableRoot = tooltipEl.querySelector('table');\n tableRoot.innerHTML = innerHtml;\n }\n\n // `this` will be the overall tooltip\n var position = this._chart.canvas.getBoundingClientRect();\n\n // Display, position, and set styles for font\n tooltipEl.style.opacity = 1;\n tooltipEl.style.position = 'absolute';\n tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';\n tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';\n tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;\n tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';\n tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;\n tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';\n tooltipEl.style.pointerEvents = 'none';\n }\n }\n }\n});\n")),Object(b.b)("p",null,"See ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.chartjs.org/samples/"}),"samples")," for examples on how to get started with custom tooltips."),Object(b.b)("h2",{id:"tooltip-model"},"Tooltip Model"),Object(b.b)("p",null,"The tooltip model contains parameters that can be used to render the tooltip."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"{\n // The items that we are rendering in the tooltip. See Tooltip Item Interface section\n dataPoints: TooltipItem[],\n\n // Positioning\n xPadding: number,\n yPadding: number,\n xAlign: string,\n yAlign: string,\n\n // X and Y properties are the top left of the tooltip\n x: number,\n y: number,\n width: number,\n height: number,\n // Where the tooltip points to\n caretX: number,\n caretY: number,\n\n // Body\n // The body lines that need to be rendered\n // Each object contains 3 parameters\n // before: string[] // lines of text before the line with the color square\n // lines: string[], // lines of text to render as the main item with color square\n // after: string[], // lines of text to render after the main lines\n body: object[],\n // lines of text that appear after the title but before the body\n beforeBody: string[],\n // line of text that appear after the body and before the footer\n afterBody: string[],\n bodyFontColor: Color,\n _bodyFontFamily: string,\n _bodyFontStyle: string,\n _bodyAlign: string,\n bodyFontSize: number,\n bodySpacing: number,\n\n // Title\n // lines of text that form the title\n title: string[],\n titleFontColor: Color,\n _titleFontFamily: string,\n _titleFontStyle: string,\n titleFontSize: number,\n _titleAlign: string,\n titleSpacing: number,\n titleMarginBottom: number,\n\n // Footer\n // lines of text that form the footer\n footer: string[],\n footerFontColor: Color,\n _footerFontFamily: string,\n _footerFontStyle: string,\n footerFontSize: number,\n _footerAlign: string,\n footerSpacing: number,\n footerMarginTop: number,\n\n // Appearance\n caretSize: number,\n caretPadding: number,\n cornerRadius: number,\n backgroundColor: Color,\n\n // colors to render for each item in body[]. This is the color of the squares in the tooltip\n labelColors: Color[],\n labelTextColors: Color[],\n\n // 0 opacity is a hidden tooltip\n opacity: number,\n multiKeyBackground: Color,\n displayColors: boolean,\n borderColor: Color,\n borderWidth: number\n}\n")))}d.isMDXComponent=!0},200:function(t,e,n){"use strict";n.d(e,"a",(function(){return p})),n.d(e,"b",(function(){return m}));var a=n(0),l=n.n(a);function b(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function o(t){for(var e=1;e=0||(l[n]=t[n]);return l}(t,e);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(l[n]=t[n])}return l}var c=l.a.createContext({}),d=function(t){var e=l.a.useContext(c),n=e;return t&&(n="function"==typeof t?t(e):o({},e,{},t)),n},p=function(t){var e=d(t.components);return l.a.createElement(c.Provider,{value:e},t.children)},j={inlineCode:"code",wrapper:function(t){var e=t.children;return l.a.createElement(l.a.Fragment,{},e)}},O=Object(a.forwardRef)((function(t,e){var n=t.components,a=t.mdxType,b=t.originalType,r=t.parentName,c=i(t,["components","mdxType","originalType","parentName"]),p=d(n),O=a,m=p["".concat(r,".").concat(O)]||p[O]||j[O]||b;return n?l.a.createElement(m,o({ref:e},c,{components:n})):l.a.createElement(m,o({ref:e},c))}));function m(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var b=n.length,r=new Array(b);r[0]=O;var o={};for(var i in e)hasOwnProperty.call(e,i)&&(o[i]=e[i]);o.originalType=t,o.mdxType="string"==typeof t?t:a,r[1]=o;for(var c=2;c=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=n.a.createContext({}),d=function(e){var t=n.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c({},t,{},e)),a},p=function(e){var t=d(e.components);return n.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},u=Object(r.forwardRef)((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=d(a),u=r,h=p["".concat(i,".").concat(u)]||p[u]||b[u]||o;return a?n.a.createElement(h,c({ref:t},l,{components:a})):n.a.createElement(h,c({ref:t},l))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=u;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=n.a.createContext({}),d=function(e){var t=n.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c({},t,{},e)),a},p=function(e){var t=d(e.components);return n.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.a.createElement(n.a.Fragment,{},t)}},u=Object(r.forwardRef)((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=d(a),u=r,h=p["".concat(i,".").concat(u)]||p[u]||b[u]||o;return a?n.a.createElement(h,c({ref:t},l,{components:a})):n.a.createElement(h,c({ref:t},l))}));function h(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=u;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l