) } `,__src__:"src/demo/donut-chart-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" { DonutChart } "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"@/components/ui/charts"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" donutChartData = ["})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 1"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"9800"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 2"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"4567"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 3"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"3908"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 4"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"2400"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 5"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"1908"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" name: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"Topic 6"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" sales: "}),(0,e.jsx)(n.span,{style:{color:"#EBC88D"},children:"1398"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"]"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"DonutChartDemo"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"flex gap-2 w-full"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"DonutChart"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" data"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:"{donutChartData}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" index"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"name"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" category"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"sales"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"DonutChart"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" data"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:"{donutChartData}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" index"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"name"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" category"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"sales"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"pie"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,e.jsxs)(n.h2,{id:"installation",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @rahimstack@latest add charts `,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"npx "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:"@rahimstack@latest"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:"add"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:"charts"})]})})})}),` `,(0,e.jsxs)(n.h2,{id:"api-reference",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,e.jsxs)(s,{name:"donut-chart",children:[(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/charts/donut-chart.tsx",children:(0,e.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`type DonutChartProps = React.HTMLAttributes & { /** * The data to be displayed in the chart. * An array of objects. Each object represents a data point. */ data: any[] /** * The key containing the quantitative chart values. */ category: string /** * The key to map the data to the axis. * e.g. "value" */ index: string /** * Color palette to be used in the chart. */ colors?: ChartColor[] /** * The type of chart to display * @default "donut" */ variant?: "donut" | "pie" /** * Changes the text formatting of the label. * This only works when the variant is "donut". */ valueFormatter?: ChartValueFormatter /** * The text to be placed the center of the donut chart. * Only available when variant "donut". */ label?: string /** * If true, the label will be displayed in the center of the chart * @default true */ showLabel?: boolean /** * If true, the chart will animate when rendered */ showAnimation?: boolean /** * If true, a tooltip will be displayed when hovering over a data point * @default true */ showTooltip?: boolean /** * The element to be displayed when there is no data * @default <> */ emptyDisplay?: React.ReactElement }`,__src__:"src/workshop/charts/donut-chart.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"type"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"DonutChartProps"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" = "}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"React"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"HTMLAttributes"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"HTMLDivElement"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"> & {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The data to be displayed in the chart."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * An array of objects. Each object represents a data point."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" data: any[]"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The key containing the quantitative chart values."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" category: string"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The key to map the data to the axis."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:' * e.g. "value"'})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" index: string"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * Color palette to be used in the chart."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" colors?: "}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"ChartColor"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"[]"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The type of chart to display"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"@default"}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"donut"}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:'"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" variant?: "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"donut"'}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" | "}),(0,e.jsx)(n.span,{style:{color:"#DEA060"},children:'"pie"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * Changes the text formatting of the label."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:' * This only works when the variant is "donut".'})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" valueFormatter?: "}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"ChartValueFormatter"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The text to be placed the center of the donut chart."})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:' * Only available when variant "donut".'})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" label?: string"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * If true, the label will be displayed in the center of the chart"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"@default"}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:" true"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" showLabel?: boolean"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * If true, the chart will animate when rendered"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" showAnimation?: boolean"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * If true, a tooltip will be displayed when hovering over a data point"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"@default"}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:" true"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" showTooltip?: boolean"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * The element to be displayed when there is no data"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#898989"},children:" * "}),(0,e.jsx)(n.span,{style:{color:"#7ECBC7"},children:"@default"}),(0,e.jsx)(n.span,{style:{color:"#898989"},children:" <>"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:" emptyDisplay?: "}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"React"}),(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#84BFF9"},children:"ReactElement"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#CACACA"},children:"}"})})]})})})]})]})}function D(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(d,l)})):d(l)}var E=D;function h(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(b);})(); ;return Component;

Donut Chart

Installation

API Reference

Types

Anatomy