MixedBarChart.ux

<ChartPage Title="Multi-series with pos/neg styling" File="MixedBarChart" ux:Class="MixedBarChart" xmlns:c="Fuse.Charting" Model="MixedBarChart">
	<c:Plot Margin="5,20,20,10" YAxisSteps="8">
		<c:DataSeries Data="{data1}"/>
		<c:DataSeries Data="{data2}"/>

		<ChartButton Layer="Overlay" Alignment="TopRight" Margin="5" Clicked="{random}" Label="✧"/>
		
		<AttractorConfig Unit="Normalized" Easing="Linear" Duration="0.2" ux:Global="plotAttract"/>
		<AttractorConfig Unit="Points" Easing="Linear" Duration="0.2" ux:Global="cornerAttract"/>
		<AttractorConfig Unit="Normalized" Type="Elastic" Duration="0.5" ux:Global="lazyAttract"/>
		
		<GridLayout Columns="auto,10,5,1*" Rows="1*,5,10,20"/>
		
		<c:PlotAxis Row="0" Column="0" Axis="Y" Margin="0,0,4,0">
			<Text ux:Template="Label" Alignment="CenterRight" FontSize="15" 
				Color="#000" Value="{Plot axis.value}€"/>
		</c:PlotAxis>
		<c:PlotTicks Row="0" Column="1" Axis="Y" StrokeWidth="2" StrokeColor="#004"/>
		
		<Panel Row="0" Column="3">
			<c:PlotData SeriesIndex="1">
				<c:PlotBar Attractor="lazyAttract">
					<Rectangle Alignment="VerticalCenter" Color="#0088" CornerRadius="5" Height="5"/>
				</c:PlotBar>
			</c:PlotData>
			<c:PlotData SeriesIndex="0">
				<c:PlotBar Attractor="plotAttract">
					<Rectangle Alignment="HorizontalCenter" Width="60%"
						Color="attract(({Plot data.source.y} &lt; {Plot baseline.y}) ? #DAA : #ADA,plotAttract)" 
						StrokeColor="({Plot data.source.y} &lt; {Plot baseline.y}) ? #800 : #080" StrokeWidth="2"
						CornerRadius="attract(
							({Plot data.source.y} &lt; {Plot baseline.y}) ? (0,0,20,20) : (20,20,0,0), cornerAttract)"/>
				</c:PlotBar>
			</c:PlotData>
		</Panel>
		
		<c:PlotTicks Row="2" Column="3" Axis="X" StrokeWidth="2" StrokeColor="#004"/>
		<c:PlotAxis Row="3" Column="3" Axis="X">
			<Text ux:Template="Label" TextAlignment="Center" FontSize="15" 
				Color="#000" Value="{Plot axis.label}"/>
		</c:PlotAxis>
		
	</c:Plot>
</ChartPage>