[{"data":1,"prerenderedAt":885},["ShallowReactive",2],{"navigation_docs":3,"-charts-line-chart":284,"-charts-line-chart-surround":880},[4,31,117,216],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",{"title":26,"path":27,"stem":28,"icon":29},"Why vccs","\u002Fgetting-started\u002Fwhy-vccs","1.getting-started\u002F4.why-vccs","i-lucide-scale",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72,77,82,87,92,97,102,107,112],{"title":38,"path":39,"stem":40,"icon":41},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":43,"path":44,"stem":45,"icon":46},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":78,"path":79,"stem":80,"icon":81},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":83,"path":84,"stem":85,"icon":86},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":88,"path":89,"stem":90,"icon":91},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":93,"path":94,"stem":95,"icon":96},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":98,"path":99,"stem":100,"icon":101},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":103,"path":104,"stem":105,"icon":106},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":108,"path":109,"stem":110,"icon":111},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":113,"path":114,"stem":115,"icon":116},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":118,"icon":119,"path":120,"stem":121,"children":122,"page":30},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[123,128,133,138,143,148,153,158,163,168,172,177,182,187,192,197,202,206,211],{"title":124,"path":125,"stem":126,"icon":127},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":129,"path":130,"stem":131,"icon":132},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":134,"path":135,"stem":136,"icon":137},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":139,"path":140,"stem":141,"icon":142},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":144,"path":145,"stem":146,"icon":147},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":149,"path":150,"stem":151,"icon":152},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":154,"path":155,"stem":156,"icon":157},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":159,"path":160,"stem":161,"icon":162},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":164,"path":165,"stem":166,"icon":167},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":169,"path":170,"stem":171,"icon":56},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":173,"path":174,"stem":175,"icon":176},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":178,"path":179,"stem":180,"icon":181},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":183,"path":184,"stem":185,"icon":186},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":188,"path":189,"stem":190,"icon":191},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":193,"path":194,"stem":195,"icon":196},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":198,"path":199,"stem":200,"icon":201},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":203,"path":204,"stem":205,"icon":142},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":207,"path":208,"stem":209,"icon":210},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":212,"path":213,"stem":214,"icon":215},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":217,"icon":218,"path":219,"stem":220,"children":221,"page":30},"Components","i-lucide-code","\u002Fcomponents","4.components",[222,227,232,236,241,245,250,254,259,264,269,274,279],{"title":223,"path":224,"stem":225,"icon":226},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":228,"path":229,"stem":230,"icon":231},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":233,"path":234,"stem":235,"icon":201},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":237,"path":238,"stem":239,"icon":240},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":242,"path":243,"stem":244,"icon":152},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":246,"path":247,"stem":248,"icon":249},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":251,"path":252,"stem":253,"icon":61},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":255,"path":256,"stem":257,"icon":258},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":260,"path":261,"stem":262,"icon":263},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":265,"path":266,"stem":267,"icon":268},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":270,"path":271,"stem":272,"icon":273},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":275,"path":276,"stem":277,"icon":278},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":280,"path":281,"stem":282,"icon":283},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":285,"title":139,"body":286,"description":873,"extension":874,"links":875,"meta":876,"navigation":877,"path":140,"seo":878,"stem":141,"__hash__":879},"docs\u002F3.charts\u002F03.line-chart.md",{"type":287,"value":288,"toc":861},"minimark",[289,293,298,301,306,310,318,322,326,333,337,341,347,351,355,362,366,370,381,385,757,781,785],[290,291,292],"p",{},"Line charts display data as a series of points connected by line segments.",[294,295,297],"h2",{"id":296},"simple-line-chart","Simple Line Chart",[290,299,300],{},"A basic line chart with a single series.",[302,303],"chart-demo",{"description":304,"name":297,"src":305},"A line chart with monotone interpolation.","line-charts\u002Fsimple-line-chart",[294,307,309],{"id":308},"multi-line-chart","Multi-Line Chart",[290,311,312,313,317],{},"Add multiple ",[314,315,316],"code",{},"\u003CLine>"," components for multi-series charts.",[302,319],{"description":320,"name":309,"src":321},"Two line series with different colors.","line-charts\u002Fmulti-line-chart",[294,323,325],{"id":324},"dashed-line-chart","Dashed Line Chart",[290,327,328,329,332],{},"Use ",[314,330,331],{},"stroke-dasharray"," for dashed lines.",[302,334],{"description":335,"name":325,"src":336},"Two lines with different dash patterns.","line-charts\u002Fdashed-line-chart",[294,338,340],{"id":339},"step-line-chart","Step Line Chart",[290,342,328,343,346],{},[314,344,345],{},"type=\"step\""," for step-wise transitions.",[302,348],{"description":349,"name":340,"src":350},"A line chart with step interpolation.","line-charts\u002Fstep-line-chart",[294,352,354],{"id":353},"line-chart-with-dots","Line Chart with Dots",[290,356,357,358,361],{},"Lines show a dot on every data point by default. Set ",[314,359,360],{},":dot=\"false\""," to hide the dots, or pass an object to style them.",[302,363],{"description":364,"name":354,"src":365},"A line chart with visible dots on each point.","line-charts\u002Fdots-line-chart",[294,367,369],{"id":368},"linechart-props","LineChart props",[290,371,372,375,376,380],{},[314,373,374],{},"\u003CLineChart>"," takes the ",[377,378,379],"a",{"href":125},"chart container props",", including bar sizing.",[294,382,384],{"id":383},"line-props","Line props",[386,387,388,407],"table",{},[389,390,391],"thead",{},[392,393,394,398,401,404],"tr",{},[395,396,397],"th",{},"Prop",[395,399,400],{},"Type",[395,402,403],{},"Default",[395,405,406],{},"Description",[408,409,410,430,461,479,499,519,537,554,574,594,617,633,649,669,689,707,723,740],"tbody",{},[392,411,412,418,421,427],{},[413,414,415],"td",{},[314,416,417],{},"data-key",[413,419,420],{},"row path or accessor",[413,422,423],{},[424,425,426],"strong",{},"required",[413,428,429],{},"Field with the value",[392,431,432,437,442,447],{},[413,433,434],{},[314,435,436],{},"type",[413,438,439],{},[314,440,441],{},"CurveType",[413,443,444],{},[314,445,446],{},"'linear'",[413,448,449,450,453,454,453,457,460],{},"Curve interpolation (",[314,451,452],{},"monotone",", ",[314,455,456],{},"step",[314,458,459],{},"natural",", …)",[392,462,463,468,473,476],{},[413,464,465],{},[314,466,467],{},"stroke",[413,469,470],{},[314,471,472],{},"string",[413,474,475],{},"series palette",[413,477,478],{},"Line color",[392,480,481,486,491,496],{},[413,482,483],{},[314,484,485],{},"stroke-width",[413,487,488],{},[314,489,490],{},"number",[413,492,493],{},[314,494,495],{},"1",[413,497,498],{},"Line width",[392,500,501,506,511,516],{},[413,502,503],{},[314,504,505],{},"dot",[413,507,508],{},[314,509,510],{},"boolean | object",[413,512,513],{},[314,514,515],{},"true",[413,517,518],{},"Show a dot on every point; an object sets dot attributes",[392,520,521,526,530,534],{},[413,522,523],{},[314,524,525],{},"active-dot",[413,527,528],{},[314,529,510],{},[413,531,532],{},[314,533,515],{},[413,535,536],{},"Show a dot on the active point",[392,538,539,544,548,551],{},[413,540,541],{},[314,542,543],{},"label",[413,545,546],{},[314,547,510],{},[413,549,550],{},"—",[413,552,553],{},"Show a value label on every point",[392,555,556,561,566,571],{},[413,557,558],{},[314,559,560],{},"connect-nulls",[413,562,563],{},[314,564,565],{},"boolean",[413,567,568],{},[314,569,570],{},"false",[413,572,573],{},"Draw across missing values",[392,575,576,581,586,591],{},[413,577,578],{},[314,579,580],{},"data",[413,582,583],{},[314,584,585],{},"Array",[413,587,588,589],{},"the chart's ",[314,590,580],{},[413,592,593],{},"Rows for this series only",[392,595,596,604,609,614],{},[413,597,598,453,601],{},[314,599,600],{},"x-axis-id",[314,602,603],{},"y-axis-id",[413,605,606],{},[314,607,608],{},"string | number",[413,610,611],{},[314,612,613],{},"0",[413,615,616],{},"Axes this series uses",[392,618,619,624,628,630],{},[413,620,621],{},[314,622,623],{},"name",[413,625,626],{},[314,627,608],{},[413,629,550],{},[413,631,632],{},"Name in the legend and tooltip",[392,634,635,640,644,646],{},[413,636,637],{},[314,638,639],{},"unit",[413,641,642],{},[314,643,608],{},[413,645,550],{},[413,647,648],{},"Unit after tooltip values",[392,650,651,656,661,666],{},[413,652,653],{},[314,654,655],{},"legend-type",[413,657,658],{},[314,659,660],{},"LegendType",[413,662,663],{},[314,664,665],{},"'line'",[413,667,668],{},"Legend icon",[392,670,671,676,681,683],{},[413,672,673],{},[314,674,675],{},"tooltip-type",[413,677,678],{},[314,679,680],{},"'none'",[413,682,550],{},[413,684,685,686,688],{},"Set ",[314,687,680],{}," to leave the series out of the tooltip",[392,690,691,696,700,704],{},[413,692,693],{},[314,694,695],{},"hide",[413,697,698],{},[314,699,565],{},[413,701,702],{},[314,703,570],{},[413,705,706],{},"Hide the series",[392,708,709,714,718,720],{},[413,710,711],{},[314,712,713],{},"class",[413,715,716],{},[314,717,472],{},[413,719,550],{},[413,721,722],{},"Class on the series layer",[392,724,725,730,734,737],{},[413,726,727],{},[314,728,729],{},"is-animation-active",[413,731,732],{},[314,733,565],{},[413,735,736],{},"the chart's value",[413,738,739],{},"Animate this series",[392,741,742,747,752,754],{},[413,743,744],{},[314,745,746],{},"transition",[413,748,749],{},[314,750,751],{},"ChartTransition",[413,753,736],{},[413,755,756],{},"Timing and easing of data changes",[290,758,759,760,453,763,453,766,769,770,773,774,453,777,780],{},"Events: ",[314,761,762],{},"@click",[314,764,765],{},"@mouseenter",[314,767,768],{},"@mouseleave"," with ",[314,771,772],{},"(point, index, event)",", and ",[314,775,776],{},"@animation-start",[314,778,779],{},"@animation-end",".",[294,782,784],{"id":783},"line-slots","Line slots",[386,786,787,799],{},[389,788,789],{},[392,790,791,794,797],{},[395,792,793],{},"Slot",[395,795,796],{},"Props",[395,798,406],{},[408,800,801,816,831,846],{},[392,802,803,808,813],{},[413,804,805],{},[314,806,807],{},"#shape",[413,809,810],{},[314,811,812],{},"CurveProps",[413,814,815],{},"Replace the line path",[392,817,818,823,828],{},[413,819,820],{},[314,821,822],{},"#dot",[413,824,825],{},[314,826,827],{},"{ cx, cy, index, value, payload }",[413,829,830],{},"Replace a point dot",[392,832,833,838,843],{},[413,834,835],{},[314,836,837],{},"#activeDot",[413,839,840],{},[314,841,842],{},"{ cx, cy, r, fill, stroke, index, dataKey, payload, value }",[413,844,845],{},"Replace the active dot",[392,847,848,853,858],{},[413,849,850],{},[314,851,852],{},"#label",[413,854,855],{},[314,856,857],{},"LabelListSlotProps",[413,859,860],{},"Replace a point label",{"title":862,"searchDepth":863,"depth":863,"links":864},"",2,[865,866,867,868,869,870,871,872],{"id":296,"depth":863,"text":297},{"id":308,"depth":863,"text":309},{"id":324,"depth":863,"text":325},{"id":339,"depth":863,"text":340},{"id":353,"depth":863,"text":354},{"id":368,"depth":863,"text":369},{"id":383,"depth":863,"text":384},{"id":783,"depth":863,"text":784},"Build line charts with custom dots, labels, and multiple series","md",null,{},{"icon":142},{"title":139,"description":873},"Rd2bQxzMBYzX3OmHH4nSxcJMAOjR8xcoK0i71E_UJkA",[881,883],{"title":134,"path":135,"stem":136,"description":882,"icon":137,"children":-1},"Build bar charts with stacking, labels, and custom shapes",{"title":144,"path":145,"stem":146,"description":884,"icon":147,"children":-1},"Build pie and donut charts for part-to-whole comparisons",1793527167934]