Highlighting points on Area/Line Charts

11 posts, 1 answers
  1. Richard
    Richard avatar
    4 posts
    Member since:
    Feb 2012

    Posted 24 May 2012 Link to this post

    Hello,

    Is it possible to highlight a specific point on a line or area chart. For example, if I have a graph showing the number of sandwiches sold each day in a cafe and on the 10th day of the month they raise the price by 5% can I add a marker to the 10th so show that an event happened on that day?

    Thanks

    Ric

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 May 2012 Link to this post

    Hello Ric,

    Currently setting a property to a specific point in Kendo UI Chart is not supported - this functionality is in our ToDo list for future releases. As a possible workaround at this stage I would suggest to use the plotBands configuration option of the category axis and then set a color to the categories which need to be highlighted. For example:
    $("#chart").kendoChart({
      ...
      categoryAxis: {
        categories: ["Day1", "Day2", "Day3", "Day4", "Day5", "Day6", "Day7", "Day8", "Day9", "Day10"],
        plotBands: [{
            from: 4,
            to: 5,
            color: "green"
        }],
      }
      ...
    });

    I hope this helps. 

    Greetings,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Richard
    Richard avatar
    4 posts
    Member since:
    Feb 2012

    Posted 25 May 2012 Link to this post

    Hi Lliana,

    Thanks for the answer. I think another option, for anyone reading this, would be to use a scatter chart over a line chart to highlight events. I can put a scatter plot in the correct place.
  4. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 05 Jun 2012 Link to this post

    Richard,

    Could you possibly supply the code for " I think another option, for anyone reading this, would be to use a scatter chart over a line chart to highlight events"

    I would mucho appreciate it!
  5. Richard
    Richard avatar
    4 posts
    Member since:
    Feb 2012

    Posted 05 Jun 2012 Link to this post

    Hello Juan,

    I've not actually implemented it but I was thinking of doing something like this: http://demos.kendoui.com/dataviz/bar-charts/multiple-axes.html
     but with line and scatter charts. When I try it out I will post it.

  6. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 05 Jun 2012 Link to this post

    Ah, I was hoping you found a way. I have a similar need - but was told mixing scatter and line was impossible.

    http://www.kendoui.com/forums/dataviz/chart/how-to---mix-scatter-and-line-chart-series.aspx#2134891


  7. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 18 Jul 2013 Link to this post

    Is there any news on this? Has anyone found a workaround at this point - or, is it coming in the framework soon?
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jul 2013 Link to this post

    Hello guys,

    I am afraid mixing categorical and XY charts is not supported, however I am glad to inform you that with Kendo UI Q2 2013 official release there are Notes which can be used for the discussed scenario (online demo). 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 24 Jul 2013 Link to this post

    Using the new Notes option worked enough for now, thanks for the tip lliana.

    However, a couple of issues with Notes. One, the placement of Notes isn't flexible enough. For example, I really want the Note marker to overlay on the series marker, not be above/below or to the side of the marker. They also suffer from the same clipping problem that chart tooltips have in general - which is, if they are at the far right or left edge of the chart they will be partially hidden by the edge of the chart area because they are not dynamically adjusted.

    What would be great would be to have the ability to highlight a series plot point. The scenario is this:
    - A datasource that has category, value, 'some other data'.
    - The chart displays category, value
    - A separate table outside the chart shows 'some other data' from the data source.
    - When the user clicks a particular series plot point, show the related 'some other data' to that point and highlight the point on the chart.
    - The reverse situation, where the user navigates the 'some other data' records outside the chart and have the relevant point on the chart highlight.
    So, now, the user can see what plot point is selected and currently shown in a table outside of the chart.

    I'm sort of able to do this with notes - but it is clunky and the display isn't quite right. Is there already a feature request related to this that you know of (so I can add my vote)?
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 29 Jul 2013 Link to this post

    Hi Joshua,

    As far as I know at our UserVoice page is not added an idea for highlighting series plot points - feel free to share it. The more votes the suggestion collects, the higher priority will have.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Josh
    Josh avatar
    72 posts
    Member since:
    Jun 2013

    Posted 29 Jul 2013 Link to this post

    Thanks Iliana. Here's the User Voice post for anyone that wants to vote:

    http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/4244944-highlight-chart-series-plot-point-s-

Back to Top