{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/react-charts/axes/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section explains what chart axes are, how to configure and style them, and which axis type to use in which situation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A chart uses axes to plot data such as categories and values by converting them to screen coordinates. Since any point on the screen is an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(x, y)"}]},{"type":"text","value":" pair of coordinates, a chart needs two orthogonal axes to plot the data — a horizontal axis to determine the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" position of a point and a vertical axis to determine the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"y"}]},{"type":"text","value":" position. Axes also show ticks, labels and grid lines to help the user navigate a chart."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The charting library supports three axis types:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#category-axis"},"children":[{"type":"text","value":"Category"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#number-axis"},"children":[{"type":"text","value":"Number"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-axis"},"children":[{"type":"text","value":"Time"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each type is tailored to be used with certain types of data. An axis can be positioned to any side of a chart — "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'top'"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'bottom'"}]},{"type":"text","value":", or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":". Just like with series, the axes can be specified by setting the corresponding "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"axes"}]},{"type":"text","value":" array property of a chart."}]},{"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":"Axes are only supported in "},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/Cartesian_coordinate_system","target":"blank"},"children":[{"type":"text","value":"cartesian"}]},{"type":"text","value":" charts, not "},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/Polar_coordinate_system","target":"blank"},"children":[{"type":"text","value":"polar"}]},{"type":"text","value":". For example, you can't use axes with pie series."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"category-axis","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#category-axis","ariaLabel":"category axis permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Category Axis"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The category axis is meant to be used with relatively small datasets of discrete values or categories, such as sales per product, person or quarter, where "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"product"}]},{"type":"text","value":", "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"person"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"quarter"}]},{"type":"text","value":" are categories."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The category axis renders a "},{"type":"element","tagName":"a","properties":{"href":"#ticks"},"children":[{"type":"text","value":"tick"}]},{"type":"text","value":", a "},{"type":"element","tagName":"a","properties":{"href":"#labels"},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" and a "},{"type":"element","tagName":"a","properties":{"href":"#grid-lines"},"children":[{"type":"text","value":"grid line"}]},{"type":"text","value":" for each category, and spaces out all ticks evenly."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The category axis is used as the x-axis by default, positioned at the bottom of a chart."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The simplest category axis config looks like this:"}]},{"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    type"},{"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":"'category'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    position"},{"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":"'bottom'"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"number-axis","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#number-axis","ariaLabel":"number axis permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Number Axis"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The number axis is meant to be used as a value axis. While categories are spaced out evenly, the distance between values depends on their magnitude."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of using one tick per value, the number axis will determine the range of all values, round it up and try to segment the rounded range with 10 evenly spaced ticks (unless you configure it differently)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The number axis is used as the y-axis by default, positioned to the left a chart."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's the simplest number axis config:"}]},{"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    type"},{"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":"'number'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    position"},{"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":"'left'"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"time-axis","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-axis","ariaLabel":"time axis permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Time Axis"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The time axis is similar to the number axis in the sense that it is also used to plot continuous values. The time axis can even be used with numeric data (in addition to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" objects), but the numbers will be interpreted as Unix timestamps. The time axis differs from the number axis in tick segmentation and label formatting. For example, you could choose to place a tick every 5 minutes, every month, or every Friday."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The time axis also supports specifier strings to control the way time values are presented as labels. For example, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%H:%M:%S"}]},{"type":"text","value":" specifier string will instruct the axis to format a time value like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"new Date('Tue Feb 04 202 15:08:03')"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1580828883000"}]},{"type":"text","value":" as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'15:08:03'"}]},{"type":"text","value":". Time axes are typically used as x-axes and placed at the bottom of a chart. The simplest time axis config looks like this:"}]},{"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    type"},{"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":"'time'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    position"},{"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":"'bottom'"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"title","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#title","ariaLabel":"title permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Title"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes it may not be obvious what a chart's dimension represents. For example, you might see numbers on a chart's axis and not be able to tell if they're millimetres, percentages, dollars, or something else! It can also be helpful to provide extra information. For example, category axis labels can clearly show people's names, but it might be worth knowing that they are a company's best performing sales people."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Luckily, an axis can have a title just like a chart. In the example below we can use axis titles to point out that:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the horizontal dimension shows desktop operating systems"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the vertical dimension shows their percentage market share"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tagName":"a","properties":{"href":"#reference-axis.title"},"children":[{"type":"text","value":"API reference"}]},{"type":"text","value":" for axis title styling options like font and colour."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"example-axis-title","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-axis-title","ariaLabel":"example axis title permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Axis Title"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Axis Title","name":"axis-title","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"ticks","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#ticks","ariaLabel":"ticks permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Ticks"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Category axes show a tick for every category. Number and time axes try to segment the whole range into a certain number of intervals (10 by default, giving 11 ticks in total)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"size"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":" of chart axis ticks can be configured as explained in the "},{"type":"element","tagName":"a","properties":{"href":"#reference-axis.tick"},"children":[{"type":"text","value":"API reference"}]},{"type":"text","value":" below. These configs apply to all axis types."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With number and time axes you can additionally set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"count"}]},{"type":"text","value":" property:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In number axes the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"count"}]},{"type":"text","value":" means the desired number of ticks for the axis to use. Note that this value only serves as a hint and doesn't guarantee that this number of ticks is going to be used."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In time axes the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"count"}]},{"type":"text","value":" property can be set to a time interval, for example "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agCharts.time.month"}]},{"type":"text","value":", to make an axis show a tick every month."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates how the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"count"}]},{"type":"text","value":" property of the number axis can be used to reduce or increase the amount of ticks."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"example-axis-ticks","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-axis-ticks","ariaLabel":"example axis ticks permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Axis Ticks"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Axis Tick Styling","name":"axis-tick-count","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"labels","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#labels","ariaLabel":"labels permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Labels"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The axis renders a label next to every tick to show the tick's value. Chart axis labels support the same font and colour options as the axis title. Additionally, the distance of the labels from the ticks and their rotation can be configured via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rotation"}]},{"type":"text","value":" properties respectively."}]},{"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, for example."}]},{"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":"h3","properties":{"id":"example-label-formatter","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-label-formatter","ariaLabel":"example label formatter permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Label Formatter"}]},{"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":"time-label-format-string","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#time-label-format-string","ariaLabel":"time label format string permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Time Label Format String"}]},{"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 data 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":"h3","properties":{"id":"example-time-label-format","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-time-label-format","ariaLabel":"example time label format permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Time Label Format"}]},{"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 %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.count"}]},{"type":"text","value":" config to use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agCharts.time.month"}]},{"type":"text","value":" interval."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Time Axis Label Format","name":"time-axis-label-format","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"grid-lines","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid-lines","ariaLabel":"grid lines permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Grid Lines"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Chart axes feature grid lines by default. Grid lines extend from axis ticks on the other side of the axis into the series area, so that it's easy to trace a series item such as a marker to a corresponding tick/label."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grid lines have the same stroke width as ticks."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grid lines of each axis can be styled individually via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridStyle"}]},{"type":"text","value":" config. The config takes an array of objects with two properties:"}]},{"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":"stroke"}]},{"type":"text","value":": colour string in hex, "},{"type":"element","tagName":"a","properties":{"href":"https://www.w3.org/TR/css-color-4/#typedef-named-color","target":"blank"},"children":[{"type":"text","value":"named"}]},{"type":"text","value":", rgb, or rgba format."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lineDash"}]},{"type":"text","value":": an array of numbers that specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[5, 15, 25]"}]},{"type":"text","value":" will become "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[5, 15, 25, 5, 15, 25]"}]},{"type":"text","value":". If the array is empty, the grid lines will be solid without any dashes."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each config object in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridStyle"}]},{"type":"text","value":" array is alternately applied to the grid lines of the axis."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"example-grid-lines","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-grid-lines","ariaLabel":"example grid lines permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Grid Lines"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"chart-example","properties":{"title":"Axis Grid Lines","name":"axis-grid-lines","type":"generated"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"api-reference","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#api-reference","ariaLabel":"api reference permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"API Reference"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"charts-api/api.json","section":"axis","config":"{ \"showSnippets\": true }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Axes","enterprise":null,"description":null},"headings":[{"id":"category-axis","depth":2,"value":"Category Axis"},{"id":"number-axis","depth":2,"value":"Number Axis"},{"id":"time-axis","depth":2,"value":"Time Axis"},{"id":"title","depth":2,"value":"Title"},{"id":"example-axis-title","depth":3,"value":"Example: Axis Title"},{"id":"ticks","depth":2,"value":"Ticks"},{"id":"example-axis-ticks","depth":3,"value":"Example: Axis Ticks"},{"id":"labels","depth":2,"value":"Labels"},{"id":"example-label-formatter","depth":3,"value":"Example: Label Formatter"},{"id":"time-label-format-string","depth":3,"value":"Time Label Format String"},{"id":"example-time-label-format","depth":3,"value":"Example: Time Label Format"},{"id":"grid-lines","depth":2,"value":"Grid Lines"},{"id":"example-grid-lines","depth":3,"value":"Example: Grid Lines"},{"id":"api-reference","depth":2,"value":"API Reference"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/charts-axes","pageName":"charts-axes"}},"staticQueryHashes":["1766026005","3577950178","3666212512"]}