https://quickchart.io/documentation/assets/js/422117d1.ec5157f7.js

1/*! For license information please see 422117d1.ec5157f7.js.LICENSE.txt */
2"use strict";(self.webpackChunkquickchart_docs=self.webpackChunkquickchart_docs||[]).push([[8958],{4846:(t,e,n)=>{n.d(e,{Z:()=>i});var r=n(7294),o=n(2203);const i=n.n(o)()({loader:()=>Promise.all([n.e(532),n.e(1959),n.e(8815)]).then(n.bind(n,8815)),loading:()=>r.createElement("span",null,"Loading...")})},2203:(t,e,n)=>{function r(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function o(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function a(){return a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},a.apply(this,arguments)}var l=n(7294),s=n(5697),c=[],u=[];function d(t){var e=t(),n={loading:!0,loaded:null,error:null};return n.promise=e.then((function(t){return n.loading=!1,n.loaded=t,t})).catch((function(t){throw n.loading=!1,n.error=t,t})),n}function h(t){var e={loading:!1,loaded:{},error:null},n=[];try{Object.keys(t).forEach((function(r){var o=d(t[r]);o.loading?e.loading=!0:(e.loaded[r]=o.loaded,e.error=o.error),n.push(o.promise),o.promise.then((function(t){e.loaded[r]=t})).catch((function(t){e.error=t}))}))}catch(r){e.error=r}return e.promise=Promise.all(n).then((function(t){return e.loading=!1,t})).catch((function(t){throw e.loading=!1,t})),e}function p(t,e){return l.createElement((n=t)&&n.__esModule?n.default:n,e);var n}function f(t,e){var d,h;if(!e.loading)throw new Error("react-loadable requires a `loading` component");var f=a({loader:null,loading:null,delay:200,timeout:null,render:p,webpack:null,modules:null},e),m=null;function y(){return m||(m=t(f.loader)),m.promise}return c.push(y),"function"==typeof f.webpack&&u.push((function(){if((0,f.webpack)().every((function(t){return void 0!==t&&void 0!==n.m[t]})))return y()})),h=d=function(e){function n(n){var r;return i(o(o(r=e.call(this,n)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),m=t(f.loader),r._loadModule()})),y(),r.state={error:m.error,pastDelay:!1,timedOut:!1,loading:m.loading,loaded:m.loaded},r}r(n,e),n.preload=function(){return y()};var a=n.prototype;return a.UNSAFE_componentWillMount=function(){this._loadModule()},a.componentDidMount=function(){this._mounted=!0},a._loadModule=function(){var t=this;if(this.context.loadable&&Array.isArray(f.modules)&&f.modules.forEach((function(e){t.context.loadable.report(e)})),m.loading){var e=function(e){t._mounted&&t.setState(e)};"number"==typeof f.delay&&(0===f.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){e({pastDelay:!0})}),f.delay)),"number"==typeof f.timeout&&(this._timeout=setTimeout((function(){e({timedOut:!0})}),f.timeout));var n=function(){e({error:m.error,loaded:m.loaded,loading:m.loading}),t._clearTimeouts()};m.promise.then((function(){return n(),null})).catch((function(t){return n(),null}))}},a.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},a._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},a.render=function(){return this.state.loading||this.state.error?l.createElement(f.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?f.render(this.state.loaded,this.props):null},n}(l.Component),i(d,"contextTypes",{loadable:s.shape({report:s.func.isRequired})}),h}function m(t){return f(d,t)}m.Map=function(t){if("function"!=typeof t.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return f(h,t)};var y=function(t){function e(){return t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.getChildContext=function(){return{loadable:{report:this.props.report}}},n.render=function(){return l.Children.only(this.props.children)},e}(l.Component);function v(t){for(var e=[];t.length;){var n=t.pop();e.push(n())}return Promise.all(e).then((function(){if(t.length)return v(t)}))}

2i(y,"propTypes",{report:s.func.isRequired}),i(y,"childContextTypes",{loadable:s.shape({report:s.func.isRequired}).isRequired}),m.Capture=y,m.preloadAll=function(){return new Promise((function(t,e){v(c).then(t,e)}))},m.preloadReady=function(){return new Promise((function(t,e){v(u).then(t,t)}))},t.exports=m},234:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>u});n(7294);var r=n(5893),o=n(1151),i=n(4846);const a={sidebar_position:1},l="Chart title",s={unversionedId:"reference/chart-title",id:"reference/chart-title",title:"Chart title",description:"The chart title is a label that appears on the top, left, bottom, or right of the chart.",source:"@site/documentation/reference/chart-title.mdx",sourceDirName:"reference",slug:"/reference/chart-title",permalink:"/documentation/reference/chart-title",draft:!1,editUrl:"https://github.com/typpo/quickchart-docs/edit/master/documentation/reference/chart-title.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"docsSidebar",previous:{title:"Reference",permalink:"/documentation/category/reference"},next:{title:"Grid lines",permalink:"/documentation/reference/grid-lines"}},c={},u=[{value:"Chart.js v2 (default)",id:"chartjs-v2-default",level:2},{value:"Chart.js v3 and v4",id:"chartjs-v3-and-v4",level:2}];function d(t){const e=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",a:"a"},(0,o.ah)(),t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{id:"chart-title",children:"Chart title"}),"\n",(0,r.jsx)(e.p,{children:"The chart title is a label that appears on the top, left, bottom, or right of the chart."}),"\n",(0,r.jsx)(e.h2,{id:"chartjs-v2-default",children:"Chart.js v2 (default)"}),"\n",(0,r.jsxs)(e.p,{children:["Customize your chart title by providing an ",(0,r.jsx)(e.code,{children:"options.title"})," object."]}),"\n",(0,r.jsxs)(e.p,{children:["You may specify a list of strings to show a multi-line title or subtitle. You may also set position, fontSize, fontFamily, fontColor, padding, and other attributes. See full Chart.js ",(0,r.jsx)(e.a,{href:"https://www.chartjs.org/docs/2.9.4/configuration/title.html",children:"title documentation"})," for more."]}),"\n",(0,r.jsxs)(e.p,{children:["The example below sets ",(0,r.jsx)(e.code,{children:"options.title.display"})," to true and ",(0,r.jsx)(e.code,{children:"options.title.text"}),' to "Basic chart title" in order to show a title at the top of the chart.']}),"\n",(0,r.jsx)(i.Z,{showEditor:!0,config:"{\n  type: 'bar',\n  data: {\n    labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n    datasets: [{\n      label: 'Users',\n      data: [50, 60, 70, 180]\n    }]\n  },\n  options: {\n    title: {\n      display: true,\n      text: 'Basic chart title'\n    }\n  }\n}"}),"\n",(0,r.jsx)(e.h2,{id:"chartjs-v3-and-v4",children:"Chart.js v3 and v4"}),"\n",(0,r.jsxs)(e.p,{children:["In v3, the ",(0,r.jsx)(e.code,{children:"title"})," object has moved into ",(0,r.jsx)(e.code,{children:"options.plugins"}),". See ",(0,r.jsx)(e.a,{href:"https://www.chartjs.org/docs/latest/configuration/title.html",children:"title documentation"}),"."]}),"\n",(0,r.jsx)(i.Z,{showEditor:!0,version:3,config:"{\n  type: 'bar',\n  data: {\n    labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n    datasets: [{\n      label: 'Users',\n      data: [50, 60, 70, 180]\n    }]\n  },\n  options: {\n    plugins: {\n      title: {\n        display: true,\n        text: 'Basic chart title'\n      }\n    }\n  }\n}"})]})}const h=function(t){void 0===t&&(t={});const{wrapper:e}=Object.assign({},(0,o.ah)(),t.components);return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(d,t)})):d(t)}},5251:(t,e,n)=>{n(7418);var r=n(7294),o=60103;if(e.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var i=Symbol.for;o=i("react.element"),e.Fragment=i("react.fragment")}var a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l=Object.prototype.hasOwnProperty,s={key:!0,ref:!0,__self:!0,__source:!0};function c(t,e,n){var r,i={},c=null,u=null;

2for(r in void 0!==n&&(c=""+n),void 0!==e.key&&(c=""+e.key),void 0!==e.ref&&(u=e.ref),e)l.call(e,r)&&!s.hasOwnProperty(r)&&(i[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps)void 0===i[r]&&(i[r]=e[r]);return{$$typeof:o,type:t,key:c,ref:u,props:i,_owner:a.current}}e.jsx=c,e.jsxs=c},5893:(t,e,n)=>{t.exports=n(5251)},1151:(t,e,n)=>{n.d(e,{Zo:()=>l,ah:()=>i});var r=n(7294);const o=r.createContext({});function i(t){const e=r.useContext(o);return r.useMemo((()=>"function"==typeof t?t(e):{...e,...t}),[e,t])}const a={};function l({components:t,children:e,disableParentContext:n}){let l=i(t);return n&&(l=t||a),r.createElement(o.Provider,{value:l},e)}}}]);