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

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>

</igChart:XamWebChart>

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:Series.DataPoints>

<igChart:DataPoint Value="0" />

<igChart:DataPoint Value="0" />

<igChart:DataPoint Value="0" />

<igChart:DataPoint Value="90" />

<igChart:DataPoint Value="0" />

<igChart:DataPoint Value="0" />

<igChart:DataPoint Value="0" />

</igChart:Series.DataPoints>

<igChart:Series.Fill>

<LinearGradientBrush Opacity=".5"><GradientStop Color="OrangeRed" /></LinearGradientBrush>

</igChart:Series.Fill>

</igChart:Series>

</igChart:XamWebChart.Series>

</igChart:XamWebChart>

Now following questions....

• How can I remove Column Series from Legend box i.e. Only Line series Name/Label should be visible in Legend box?
• How can I remove the border of Column Series (its in black color in attach image)?
• I need that Column series fill the entire plot area of chart vertically as my original image but when I set point to 90, it increase the Y-Axis value. How can I do that? Kindly also note that Line chart point values will be set dynamically so I don't know the maximum Y-Axis value (like hard-coded 90 value i gave in this example but eventually I don't know it) howeverI need that Column chart fill plot area vertically.

Kindly suggest any possible solution. I will appreciate if you give me any code snippets for the solution. Thanks