Line chart with multiple lines, each with different x/y values?

2 posts, 0 answers
  1. Blake
    Blake avatar
    5 posts
    Member since:
    Sep 2016

    Posted 20 Sep 2016 Link to this post


    Is it possible to create a line chart that consists of multiple curve lines (in my case 3), each with different x values and y values? For instance, I have one line (curve) that has x values ranging from 0-900 and y values ranging from 0.10-0.90. Then I have another line with x values ranging from 0-900, and y values 10,000-15,000. So on for the other line. These lines may share the same x-axis (although their x values will differ), but they will all have different y-axes. Is this possible? I'm currently trying to create a chart with my scenario, but all the documentation seems to only show how to have an x-axis that acts as a "category" where each line shares the same x-value.  If I set the datasource, that will work work if I have a single line, so I don't think I can use the datasource property since I have 3 separate lines. I've also seen that you can set the "data" property of each series, but that appears to only be y-values. How do I just load data and set coordinates individually for each series?

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Sep 2016 Link to this post

    Hi Blake,

    You could achieve the described scenario by using multiple axes - categoryAxis / valueAxis / xAxis / yAxis, depending on the series.type. For your convenience here is a basic dojo:

    I recommend to check the following documentation topics as they contain detailed information about the chart series and data binding: 
    - Data Binding

    - Data Series

    Also below are some online demos which illustrated similar scenarios:

    Iliana Nikolova
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top