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
You can try placing the column series on a y2 axis and creating a custom legend for the line series. I'm not sure if this is a good approach to work around this issue, because it will only get more complex when more things get added to the chart, but if you're curious, here's a code snippet of how i would do it.
<igChart:XamWebChart BorderBrush="Red" BorderThickness="1" x:Name="chart" EndPaletteBrush="#FFDEC51E" VerticalContentAlignment="Top" HorizontalContentAlignment="Left"> <igChart:XamWebChart.Series> <igChart:Series Fill="Green" Name="lineSeries" ChartType="Line" Label="TestSeriesLabel" AxisX="x1" AxisY="y1"> <igChart:Series.DataPoints> <igChart:DataPoint Value="3"/> <igChart:DataPoint Value="4"/> <igChart:DataPoint Value="3"/> <igChart:DataPoint Value="4"/> <igChart:DataPoint Value="3"/> <igChart:DataPoint Value="4"/> </igChart:Series.DataPoints> </igChart:Series> <igChart:Series Name="columnSeries" ChartType="Column" Fill="#50505050" Stroke="Transparent" AxisY="y2" AxisX="x1"> <igChart:Series.DataPoints> <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> </igChart:XamWebChart.Series>
<igChart:XamWebChart.Axes> <igChart:Axis AxisType="PrimaryX" Name="x1"/> <igChart:Axis AxisType="PrimaryY" Name="y1"/> <igChart:Axis AxisType="SecondaryY" Minimum="0" Maximum="1" Unit="1" AutoRange="False" Name="y2"> </igChart:Axis> </igChart:XamWebChart.Axes> <igChart:XamWebChart.Legend> <igChart:Legend> <igChart:Legend.Items> <igChart:LegendItem Text="Line series" Fill="Green"/> </igChart:Legend.Items> </igChart:Legend> </igChart:XamWebChart.Legend>
Hello Max,
I have successfully created a chart on your guidelines. However have following questions: Column series have some shadow on right end how can I remove this shadow so that it looks like left side?
Moreover if some data value is missing then how can I handle missing data in Line Series. For example, 2007 and 2008 value is missing then I want to start a line from 2009. Is it possible in XamWebChart?
Look forward for your prompt response. Thanks
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>
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.
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.
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