I have a requirement to highlight the point in Line chart based on selected ComboBox value. For example the selected value in combo box is "2010" then chart should be like this.
Does Infragistic chart support this feature? Is there any work around to do this?
Sorry, the chart doesn't support this feature, but you should be able to fake it with a column series. You can create one point in the column series for each point in the line series. Toggle the columns by setting the point value based on the index of the line's point. So, for the 2010 column, set the fourth point to 90 and others to 0.
Thanks Max, your answer gave me an idea to achive me requirements. Although I am new on Chart but with the help of documentation, I created a chart.
Here is my code
<igChart:XamWebChart x:Name="theChart" Width="Auto" Height="350" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
<igChart:XamWebChart.Series>
<igChart:Series ChartType="Line" >
<igChart:Series.Marker><igChart:Marker Type="Rectangle" /></igChart:Series.Marker>
<igChart:Series.DataPoints>
<igChart:DataPoint Value="55" Label="2007" />
<igChart:DataPoint Value="45" Label="2008" />
<igChart:DataPoint Value="36" Label="2009" />
<igChart:DataPoint Value="67" Label="2010" />
<igChart:DataPoint Value="80" Label="2011" />
<igChart:DataPoint Value="55" Label="2012" />
<igChart:DataPoint Value="50" Label="2013" />
</igChart:Series.DataPoints>
</igChart:Series>
<igChart:Series ChartType="Column" Opacity=".5">
<igChart:DataPoint Value="0" />
<igChart:DataPoint Value="90" />
<igChart:Series.Fill>
<LinearGradientBrush Opacity=".5"><GradientStop Color="OrangeRed" /></LinearGradientBrush>
</igChart:Series.Fill>
</igChart:XamWebChart.Series>
</igChart:XamWebChart>
Now following questions....
Kindly suggest any possible solution. I will appreciate if you give me any code snippets for the solution. Thanks
Hi,
I would like to ask is this feature has been added to controls or we still have to do it manually?
We have a requirement, where we want to addd shading in ploat area behind the lines. so there will be multiple areas/shadings.
Thanks.
Hello Max,
I need your assistance on one more requirements of Chart. Kindly see my post here and help me to complete my requirements.
Thanks
Thank You Max.....it rocks
You can remove the border from the column with a small data template:<igChart:Series x:Name="columnSeries" Stroke="Transparent" ChartType="Column" AxisY="y2" AxisX="x1" UseDataTemplate="True"> <igChart:Series.DataPointStyle> <Style TargetType="igChart:ColumnChartDataPointTemplate"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:ColumnChartDataPointTemplate"> <Rectangle Fill="{TemplateBinding Fill}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </igChart:Series.DataPointStyle>
Unfortunately, xamwebchart doesn't support null handling, but this is something you might want to consider using the DataChart control for.
Here is my code for creating above chart for your reference.
<igChart:XamWebChart x:Name="theChart" HorizontalAlignment="Stretch" Background="#FFEAEAEA" VerticalAlignment="Stretch" Margin="0" > <igChart:XamWebChart.Scene> <igChart:Scene> <igChart:Scene.GridArea> <igChart:GridArea BorderBrush="Black" BorderThickness="1, 0, 0, 2" /> </igChart:Scene.GridArea> </igChart:Scene> </igChart:XamWebChart.Scene> <igChart:XamWebChart.Series> <igChart:Series x:Name="lineSeries" ChartType="Line" AxisX="x1" AxisY="y1" > <igChart:Series.DataPoints> <igChart:DataPoint Value="2.3" Label="2007"> <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="2.8" Label="2008"> <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="2.9" Label="2009"> <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="3.2" Label="2010" > <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="2" Label="2011"> <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="2.1" Label="2012" > <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> <igChart:DataPoint Value="2.1" Label="2013" > <igChart:DataPoint.Marker> <igChart:Marker Type="None" Format="" /> </igChart:DataPoint.Marker> </igChart:DataPoint> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series x:Name="columnSeries" ChartType="Column" Stroke="Transparent" AxisY="y2" AxisX="x1"> <igChart:Series.DataPoints> <igChart:DataPoint Value="0" /> <igChart:DataPoint Value="0" /> <igChart:DataPoint Value="0" /> <igChart:DataPoint Value="1" /> <igChart:DataPoint Value="0" /> <igChart:DataPoint Value="0" /> <igChart:DataPoint Value="0" /> </igChart:Series.DataPoints> <igChart:Series.Fill> <LinearGradientBrush Opacity=".2"> <GradientStop Color="#FFBF00" Offset="0.541"/> <GradientStop Color="#FFBF00" Offset="1"/> </LinearGradientBrush> </igChart:Series.Fill> </igChart:Series> </igChart:XamWebChart.Series> <igChart:XamWebChart.Axes> <igChart:Axis AxisType="PrimaryX" Name="x1"> <igChart:Axis.MajorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MajorGridline> <igChart:Axis.MinorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MinorGridline> </igChart:Axis> <igChart:Axis AxisType="PrimaryY" Name="y1"> <igChart:Axis.MajorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MajorGridline> <igChart:Axis.MinorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MinorGridline> </igChart:Axis> <igChart:Axis AxisType="SecondaryY" Minimum="0" Maximum="1" Unit="1" AutoRange="False" Name="y2" Visibility="Collapsed" > <igChart:Axis.MajorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MajorGridline> <igChart:Axis.MinorGridline> <igChart:GridlineGroup Visibility="Collapsed" /> </igChart:Axis.MinorGridline> </igChart:Axis> </igChart:XamWebChart.Axes> <igChart:XamWebChart.Legend> <igChart:Legend Visibility="Collapsed" /> </igChart:XamWebChart.Legend> </igChart:XamWebChart>