Column chart with two line charts

2 posts, 0 answers
  1. James
    James avatar
    12 posts
    Member since:
    Mar 2019

    Posted 23 Apr 2019 Link to this post

    I need to create a chart that contains a column chart and two line charts imposed over the column chart.  The data set that I am working with looks like the one I have attached in the data.jpg image and the chart should look similar to the one in the chart.jpg that is attached.  I have been trying to figure out how to make this work but all to no avail.  If someone has any tips on how to get the chart designed I would appreciate it.


  2. Neli
    Neli avatar
    255 posts

    Posted 25 Apr 2019 Link to this post

    Hi James,

    In the attached file you can find a sample report. It demonstrates the following approach:
    1) The report uses CSV datasource which contains Item, Value (for the Bar Series), LineValue1 and LineValue2 (for the Line Series)
    2) The Line chart is created from the Wizard as follows:
    Categories: Item
    Values: LineValie1, LineValue2

     The result will be the graph displaying the 2 lines. In the next steps we will add the column Bars:

    3) Select the graph and from the Properties panel -> Presentation -> click Series;
    4) Click on Add for a new barSeries and set it as follows:
    Coordinate System  -> CoordinateSystem -> select the available (for example: cartesianCoordinateSystem1);
    Data -> CategoryGroup -> select the available (for example: itemGroup (GraphGroup));
    Data -> SeriesyGroup -> select the available (for example: seriesGroup (GraphGroup));
    Data -> Y : Fields.Value

    You can check the attached screenshot barSeries.PNG which demonstrates the setting. Note that from the same Graph Series Collection Editor you may add Labels, Tooltips, etc.

    If you need a second Y-axis, you may create a new Coordinate System, select the available Category axis for X-axis and add a new Numerical axis for the new Y-axis. Then you may select the new Coordinate System for the corresponding Series. In the properties of the X-axis you can use the Scale->CrossAxisPositions property to set, for example, one Y-axis to cross at the Minimum, and the other at the Maximum - XaxisCrossPositions.png screenshot.

    For more information, refer to Line Charts and Column Charts articles.

    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top