{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-charts/axes-labels/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Axis labels, positioned on the X and Y axes of a chart, supply context for the depicted data, making it easier for users to comprehend."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"label-rotation--skipping","style":"position:relative;"},"children":[{"type":"text","value":"Label Rotation & Skipping"},{"type":"element","tagName":"a","properties":{"href":"#label-rotation--skipping","ariaLabel":"label rotation  skipping permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Label rotation allows a trade-off to be made between space occupied by the axis, series area, and readability of the axis\nlabels."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Three rotation approaches are available:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"No rotation. X-axis labels are parallel to the axis, Y-axis labels are perpendicular."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Setting a fixed rotation from the axis via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rotation"}]},{"type":"text","value":" property."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Enabling automatic rotation via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotate"}]},{"type":"text","value":" property, and optionally specifying a rotation angle via the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotateAngle"}]},{"type":"text","value":" property. Rotation is applied if any label will be wider than the gap between ticks."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Label skipping is performed automatically when there is a high likelihood of collisions. To disable this, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label.avoidCollisions"}]},{"type":"text","value":" to false:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    label"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      avoidCollisions"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotate"}]},{"type":"text","value":" is enabled, rotation will be attempted first to find a label fit, before label skipping applies.\nCategory axes have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotate"}]},{"type":"text","value":" enabled by default with the default "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotateAngle"}]},{"type":"text","value":" of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"335"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label.avoidCollisions"}]},{"type":"text","value":" is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the axis labels are dropped if they do not have a minimum of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"10"}]},{"type":"text","value":"px between them. This minimum gap between the axis labels can be configured using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label.minSpacing"}]},{"type":"text","value":" property:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    label"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n      minSpacing"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"20"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates label rotation and skipping:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There is a grab handle in the bottom right to allow resizing of the chart to see how labels change with available\nspace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Initially both axes have defaults applied. The X-axis is a category axis so "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoRotate"}]},{"type":"text","value":" is enabled by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first row of buttons at the top change the configuration of both axes to allow all rotation behaviours to be\nviewed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The second row of buttons allow switching between X-axis types and labels."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Axis Label Rotation & Skipping","name":"axis-label-rotation","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"label-formatting","style":"position:relative;"},"children":[{"type":"text","value":"Label Formatting"},{"type":"element","tagName":"a","properties":{"href":"#label-formatting","ariaLabel":"label formatting permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A label formatter function can be used to change the value displayed in the label. It's a handy feature when you need to show units next to values or format number values to a certain precision."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A label formatter function receives a single "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params"}]},{"type":"text","value":" object which contains:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the raw "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" of the label (without the default formatting applied)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"index"}]},{"type":"text","value":" of the label in the data array"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the number of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fractionDigits"}]},{"type":"text","value":", if the value is a number"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the default label "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":", if the axis is a time axis"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, to add "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'%'"}]},{"type":"text","value":" units next to number values, you can use the following formatter function:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"formatter"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"params"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"value "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'%'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Axis Label Formatter","name":"axis-label-formatter","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"number-formatting","style":"position:relative;"},"children":[{"type":"text","value":"Number Formatting"},{"type":"element","tagName":"a","properties":{"href":"#number-formatting","ariaLabel":"number formatting permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For number axes, a format string can be provided, which will be used to format the numbers for display as axis labels.\nThe format string may contain the following directives, which reflect those from Python's "},{"type":"element","tagName":"a","properties":{"href":"https://docs.python.org/3/library/string.html#format-specification-mini-language","target":"_blank"},"children":[{"type":"text","value":"format specification"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[[fill]align][sign][#][0][width][grouping_option][.precision][type]"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Where:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" - Can be any character."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":" - Forces the field to be right-aligned within the available space (default)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" - Forces the field to be left-aligned within the available space."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"^"}]},{"type":"text","value":" - Forces the field to be centered within the available space."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":" - Like >, but with any sign and symbol to the left of any padding."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sign"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" - Nothing for zero or positive and a minus sign for negative (default)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" - A plus sign for zero or positive and a minus sign for negative."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"("}]},{"type":"text","value":" - Nothing for zero or positive and parentheses for negative."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":""}]},{"type":"text","value":" - A space for zero or positive and a minus sign for negative."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$"}]},{"type":"text","value":" - Apply the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$"}]},{"type":"text","value":" currency symbol"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"#"}]},{"type":"text","value":" - For binary, octal, or hexadecimal notation, prefix by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0b"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0o"}]},{"type":"text","value":", or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0x"}]},{"type":"text","value":", respectively."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" - The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" option enables zero-padding. Implicitly sets fill to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" and align to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" - The width defines the minimum field width. If not specified, then the width will be determined by the content."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"comma"}]},{"type":"text","value":" - The comma "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":","}]},{"type":"text","value":" option enables the use of a group separator, such as a comma for thousands."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"precision"}]},{"type":"text","value":" - Depending on the type, the precision either indicates the number of digits that follow the decimal point (types "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%"}]},{"type":"text","value":"), or the number of significant digits (types "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"​, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"e"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"g"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"p"}]},{"type":"text","value":"). If the precision is not specified, it defaults to 6 for all types except "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"​"}]},{"type":"text","value":" (none), which defaults to 12. Precision is ignored for integer formats (types "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"b"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"o"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"d"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"X"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"c"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"trim"}]},{"type":"text","value":" - The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"~"}]},{"type":"text","value":" option trims insignificant trailing zeros across all format types. This is most commonly used in conjunction with types "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"e"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" - Determines how the data should be presented:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%"}]},{"type":"text","value":" - Multiply by 100, and then decimal notation with a percent sign."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"b"}]},{"type":"text","value":" - Binary notation, rounded to integer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"c"}]},{"type":"text","value":" - Converts the integer to the corresponding unicode character before printing."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"d"}]},{"type":"text","value":" - Decimal notation, rounded to integer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"e"}]},{"type":"text","value":" - Exponent notation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" - Fixed point notation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"g"}]},{"type":"text","value":" - Either decimal or exponent notation, rounded to significant digits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"o"}]},{"type":"text","value":" - Octal notation, rounded to integer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" - Multiply by 100, round to significant digits, and then decimal notation with a percent sign."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"r"}]},{"type":"text","value":" - Decimal notation, rounded to significant digits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" - Decimal notation with a SI prefix, rounded to significant digits."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" - Hexadecimal notation, using lower-case letters, rounded to integer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"X"}]},{"type":"text","value":" - Hexadecimal notation, using upper-case letters, rounded to integer."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to have a formatted value in the middle of some string, you have to wrap it in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"#{}"}]},{"type":"text","value":",\nso that it's clear where the number format begins and ends. For example: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"I'm #{0>2.0f} years old"}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" config of the left axis in the example below uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'🌧️ #{0>2.1f} °C'"}]},{"type":"text","value":" specifier string for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" property to format numbers as integers padded to left with zeros to achieve a consistent 2-digit width."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that we wrapped the number format in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"#{}"}]},{"type":"text","value":" since we want to prepend the formatted value with the weather icon\nand to append the units used at the end."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Number Formatting","name":"number-axis-label-format","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"currency-formatting","style":"position:relative;"},"children":[{"type":"text","value":"Currency Formatting"},{"type":"element","tagName":"a","properties":{"href":"#currency-formatting","ariaLabel":"currency formatting permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's take a look at another example that illustrates a common requirement of formatting numbers as currency. Note that we are using:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"s"}]},{"type":"text","value":" SI prefix directive to shorten big numbers by using smaller numbers in combination with units,\nso that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"3500000"}]},{"type":"text","value":" becomes "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"3.5M"}]},{"type":"text","value":" for example"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"~"}]},{"type":"text","value":" trim option to trim all insignificant trailing zeros from the formatted value,\nso that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"3.0M"}]},{"type":"text","value":" becomes "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"3M"}]},{"type":"text","value":" for example"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$"}]},{"type":"text","value":" option so that the formatted value is prefixed by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$"}]},{"type":"text","value":" symbol"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" function in addition to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" config to convert certain SI units to currency units"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last point deserves a more in-depth explanation. Because the currency units don't match the SI\nunits exactly, we have to convert certain SI units to their currency counterparts.\nFor example, the SI unit for thousands is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"k"}]},{"type":"text","value":" for kilo, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"M"}]},{"type":"text","value":" for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"mega"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"G"}]},{"type":"text","value":" for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"giga"}]},{"type":"text","value":" and so on.\nWith currencies though it's typical to format thousands as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"K"}]},{"type":"text","value":", while "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"M"}]},{"type":"text","value":" is the same for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"million"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"B"}]},{"type":"text","value":" (rather than "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"G"}]},{"type":"text","value":") is used to denote a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"billion"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So how do we replace "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"k"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"K"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"G"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"B"}]},{"type":"text","value":"? To do that, we need to provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" function in addition to our "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" string. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" function receives the unformatted "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":",\nas well as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" function generated from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" config we provided. So all we have\nto do is to format the original value using that generated formatter "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.formatter(params.value)"}]},{"type":"text","value":"\nand replace the SI units with the currency ones "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".replace('k', 'K').replace('G', 'B')"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Currency Formatting","name":"number-axis-currency-format","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"time-formatting","style":"position:relative;"},"children":[{"type":"text","value":"Time Formatting"},{"type":"element","tagName":"a","properties":{"href":"#time-formatting","ariaLabel":"time formatting permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For time axes, a format string can be provided, which will be used to format the dates for display as axis labels. The format string may contain the following directives, which reflect those from Python's "},{"type":"element","tagName":"a","properties":{"href":"https://strftime.org/","target":"_blank"},"children":[{"type":"text","value":"strftime"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%a"}]},{"type":"text","value":" - abbreviated weekday name.*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%A"}]},{"type":"text","value":" - full weekday name.*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%b"}]},{"type":"text","value":" - abbreviated month name.*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%B"}]},{"type":"text","value":" - full month name.*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%c"}]},{"type":"text","value":" - the locale’s date and time, such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%x"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%X"}]},{"type":"text","value":".*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%d"}]},{"type":"text","value":" - zero-padded day of the month as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[01,31]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%e"}]},{"type":"text","value":" - space-padded day of the month as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[ 1,31]"}]},{"type":"text","value":"; equivalent to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%_d"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%f"}]},{"type":"text","value":" - microseconds as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[000000,999999]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%H"}]},{"type":"text","value":" - hour (24-hour clock) as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,23]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%I"}]},{"type":"text","value":" - hour (12-hour clock) as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[01,12]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%j"}]},{"type":"text","value":" - day of the year as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[001,366]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%m"}]},{"type":"text","value":" - month as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[01,12]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%M"}]},{"type":"text","value":" - minute as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,59]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%L"}]},{"type":"text","value":" - milliseconds as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[000,999]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%p"}]},{"type":"text","value":" - either AM or PM.*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%Q"}]},{"type":"text","value":" - milliseconds since UNIX epoch."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%s"}]},{"type":"text","value":" - seconds since UNIX epoch."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%S"}]},{"type":"text","value":" - second as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,61]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%u"}]},{"type":"text","value":" - Monday-based (ISO) weekday as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[1,7]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%U"}]},{"type":"text","value":" - Sunday-based week of the year as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,53]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%V"}]},{"type":"text","value":" - ISO 8601 week number of the year as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[01, 53]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%w"}]},{"type":"text","value":" - Sunday-based weekday as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[0,6]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%W"}]},{"type":"text","value":" - Monday-based week of the year as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,53]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%x"}]},{"type":"text","value":" - the locale’s date, such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%-m/%-d/%Y"}]},{"type":"text","value":".*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%X"}]},{"type":"text","value":" - the locale’s time, such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%-I:%M:%S %p"}]},{"type":"text","value":".*"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%y"}]},{"type":"text","value":" - year without century as a decimal number "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[00,99]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%Y"}]},{"type":"text","value":" - year with century as a decimal number."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%Z"}]},{"type":"text","value":" - time zone offset, such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"-0700"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"-07:00"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"-07"}]},{"type":"text","value":", or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Z"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%%"}]},{"type":"text","value":" - a literal percent sign (%)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Directives marked with an asterisk (*) may be affected by the locale definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%U"}]},{"type":"text","value":", all days in a new year preceding the first Sunday are considered to be in week 0."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nFor "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%W"}]},{"type":"text","value":", all days in a new year preceding the first Monday are considered to be in week 0."},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%V"}]},{"type":"text","value":", per the strftime man page:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this system, weeks start on a Monday, and are numbered from 01, for the first week, up to 52 or 53, for the last week. Week 1 is the first week where four or more days fall within the new year (or, synonymously, week 01 is: the first week of the year that contains a Thursday; or, the week that has 4 January in it)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%"}]},{"type":"text","value":" sign indicating a directive may be immediately followed by a padding modifier:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" - zero-padding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"_"}]},{"type":"text","value":" - space-padding"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"(nothing) - disable padding"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If no padding modifier is specified, the default is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" for all directives except "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%e"}]},{"type":"text","value":", which defaults to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"_"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" config of the bottom axis in the example below uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'%b&nbsp;%Y'"}]},{"type":"text","value":" specifier string for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" property to format dates as the abbreviated name of the month followed by the full year."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label.format"}]},{"type":"text","value":" property only affects label formatting but not segmentation. The fact that axis labels were configured to show the name of the month and the year doesn't mean that the axis will show a tick every month. To ensure that it does, we also set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"tick.interval"}]},{"type":"text","value":" config to use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"time.month"}]},{"type":"text","value":" interval."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tagName":"a","properties":{"href":"#axis-ticks"},"children":[{"type":"text","value":"Axis Ticks"}]},{"type":"text","value":" section to learn more about tick intervals."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/charts-axes-grid-lines/"},"children":[{"type":"text","value":"Grid Lines"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Axis Labels","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"label-rotation--skipping","depth":2,"value":"Label Rotation & Skipping"},{"id":"label-formatting","depth":2,"value":"Label Formatting"},{"id":"number-formatting","depth":3,"value":"Number Formatting"},{"id":"currency-formatting","depth":3,"value":"Currency Formatting"},{"id":"time-formatting","depth":3,"value":"Time Formatting"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/charts-axes-labels","pageName":"charts-axes-labels"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}