Chart with data table

[Cleanwatts]

Hello all,

 

What would be my best option to create a chart like the one in the attached image?

 

Thanks,

Luis Barreira

 

 

[Martin Ivanov]

Hello Luis,

You can achieve the demonstrated visualization with RadChartView, except the table part below the chart. For this case you will need to implement custom logic and layout. The following bullets cover some of the feature which you can use the achieve your requirement.

• You can use RadCartesianChart with two BarSeries to draw the bars. And additional two LineSeries for the lines.
• You can use the DefaultVisualStyle property of the series to style their data point appearance (the bars and the points of the line).
• The line style can be customized via its Stroke, StrokeThickness and DashArray properties. 
• You can see the Multiple Axes article which demonstrates how to add more than one axis in the chart. Note that if you want two or more series to share a single axis you will need to set their axis property to the same axis instance.

I attached a sample project demonstrating how to build the chart. The project also includes an implement of a custom grid displayed below the chart. Its position and cells are calculated based on the chart's plot area. Please give it a try and let me know if it helps.

Regards,
Martin
Telerik by Progress