- conAreaChartLegend: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: BorderColor: =RGBA(226, 232, 240, 1) BorderStyle: =BorderStyle.Solid BorderThickness: =1 DropShadow: =DropShadow.Regular Fill: =RGBA(255, 255, 255, 1) Height: =350 RadiusBottomLeft: =12 RadiusBottomRight: =12 RadiusTopLeft: =12 RadiusTopRight: =12 Width: =440 Children: - tmrChartAnimate: Control: Timer@2.0.0 Properties: Duration: =1200 Height: =1 OnTimerEnd: =Set(varChartAnimate, false) Repeat: =false Start: =varChartAnimate Visible: =false Width: =1 X: =0 Y: =0 - lblChartTitle: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Bold Height: =24 Size: =14 Text: ={{title}} Width: =400 X: =20 Y: =14 - lblChartDescription: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =20 Size: =12 Text: ={{description}} Width: =400 X: =20 Y: =44 - rectHeaderLine: Control: Rectangle@2.3.0 Properties: Fill: =RGBA(226, 232, 240, 1) Height: =1 Width: =440 X: =0 Y: =72 - imgAreaChart: Control: Image@2.2.3 Properties: Height: =176 Width: =416 X: =12 Y: =80 Image: |- =With( { _n: CountRows(colAreaChartLegendData), _maxTotal: Max(colAreaChartLegendData, desktop + mobile), _p: Min(1, tmrChartAnimate.Value / 1200) }, With( { _range: Max(1, _maxTotal), _step: 400 / Max(1, _n - 1), _ease: 1 - Power(Max(0, 1 - _p), 3) }, "data:image/svg+xml;utf8, " & EncodeUrl( "" ) ) ) - galChartInteract: Control: Gallery@2.15.0 Variant: Horizontal Properties: Fill: =RGBA(0, 0, 0, 0) Height: =140 Items: =Sequence(CountRows(colAreaChartLegendData)) ShowScrollbar: =false TemplatePadding: =0 TemplateSize: =Parent.Width / Max(1, CountRows(colAreaChartLegendData)) Width: =416 X: =12 Y: =83 Children: - btnChartHit: Control: Button@0.0.45 Properties: Appearance: ='ButtonCanvas.Appearance'.Transparent Height: =Parent.TemplateHeight OnSelect: =If(varTooltipLegendIdx = ThisItem.Value, Set(varTooltipLegendIdx, 0), Set(varTooltipLegendIdx, ThisItem.Value)) Text: ="" Width: =Parent.TemplateWidth X: =0 Y: =0 - rectTooltipLine: Control: Rectangle@2.3.0 Properties: Fill: =RGBA(100, 116, 139, 0.5) Height: =140 Visible: =varTooltipLegendIdx > 0 Width: =1 X: =12 + 8 + (varTooltipLegendIdx - 1) * (400 / Max(1, CountRows(colAreaChartLegendData) - 1)) Y: =83 - conTooltip: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: BorderColor: =RGBA(226, 232, 240, 1) BorderStyle: =BorderStyle.Solid BorderThickness: =1 DropShadow: =DropShadow.Regular Fill: =RGBA(255, 255, 255, 1) Height: =72 RadiusBottomLeft: =8 RadiusBottomRight: =8 RadiusTopLeft: =8 RadiusTopRight: =8 Visible: =varTooltipLegendIdx > 0 Width: =120 X: =Max(8, Min(312, 12 + 8 + (varTooltipLegendIdx - 1) * (400 / Max(1, CountRows(colAreaChartLegendData) - 1)) - 60)) Y: =86 Children: - lblTooltipMonth: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =16 Size: =10 Text: =If(varTooltipLegendIdx > 0, Index(colAreaChartLegendData, varTooltipLegendIdx).month, "") Width: =104 X: =8 Y: =6 - imgDotDesktop: Control: Image@2.2.3 Properties: Fill: =RGBA(59, 130, 246, 1) Height: =8 Image: =Blank() RadiusBottomLeft: =4 RadiusBottomRight: =4 RadiusTopLeft: =4 RadiusTopRight: =4 Width: =3 X: =8 Y: =28 - lblDesktopValue: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =16 Size: =11 Text: =If(varTooltipLegendIdx > 0, Text(Index(colAreaChartLegendData, varTooltipLegendIdx).desktop), "") Width: =96 X: =16 Y: =26 - imgDotMobile: Control: Image@2.2.3 Properties: Fill: =RGBA(168, 85, 247, 1) Height: =8 Image: =Blank() RadiusBottomLeft: =4 RadiusBottomRight: =4 RadiusTopLeft: =4 RadiusTopRight: =4 Width: =3 X: =8 Y: =50 - lblMobileValue: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =16 Size: =11 Text: =If(varTooltipLegendIdx > 0, Text(Index(colAreaChartLegendData, varTooltipLegendIdx).mobile), "") Width: =96 X: =16 Y: =48 - imgLegendDotDesktop: Control: Image@2.2.3 Properties: Fill: =RGBA(59, 130, 246, 1) Height: =10 Image: =Blank() RadiusBottomLeft: =5 RadiusBottomRight: =5 RadiusTopLeft: =5 RadiusTopRight: =5 Width: =10 X: =148 Y: =269 - lblLegendDesktop: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =18 Size: =11 Text: ={{desktopLabel}} Width: =68 X: =162 Y: =267 - imgLegendDotMobile: Control: Image@2.2.3 Properties: Fill: =RGBA(168, 85, 247, 1) Height: =10 Image: =Blank() RadiusBottomLeft: =5 RadiusBottomRight: =5 RadiusTopLeft: =5 RadiusTopRight: =5 Width: =10 X: =232 Y: =269 - lblLegendMobile: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =18 Size: =11 Text: ={{mobileLabel}} Width: =60 X: =246 Y: =267 - rectFooterLine: Control: Rectangle@2.3.0 Properties: Fill: =RGBA(226, 232, 240, 1) Height: =1 Width: =440 X: =0 Y: =294 - lblTrendText: Control: Label@2.5.1 Properties: Color: =RGBA(15, 23, 42, 1) Font: =Font.'Open Sans' FontWeight: =FontWeight.Semibold Height: =20 Size: =12 Text: ={{trendText}} Width: =400 X: =20 Y: =305 - lblDateRange: Control: Label@2.5.1 Properties: Color: =RGBA(100, 116, 139, 1) Font: =Font.'Open Sans' Height: =20 Size: =11 Text: ={{dateRange}} Width: =400 X: =20 Y: =329

Area Chart - Legend

Implementation