Adding a Range Area to a metric in a Line Chart



  • Avatar
    Expand Dev

    Hi Jay,


    This is really useful and is being used on a couple of our charts, it would be good if we could fix the hover over on the bar to diplay, either the range (min to max) or the difference between the (max - min).


    Thanks, James

    Comment actions Permalink
  • Avatar
    Chris Bridges

    Hey Jay,

    This is great and extremely useful for me. I agree with James, it would be great to be able to show the range values on the hover over as well as whatever other series are on the chart.


    Separate question, is it possible to use smooth lines for the range area?




    Comment actions Permalink
  • Avatar
    Brian Wilson (Edited )

    Hey Jay -- Really helpful for a task. 

    Is it possible to hide the line and leave the markers, similarly to this code?


    Edit -- Got it! Just needed to change the series # to 0

    widget.on('render', function(sender, se){

    var s = sender.queryResult.series[0];

    // Change series to a line, enable the marker and hide the line
    s.type = "line";
    s.lineWidth = 0.01;
    s.marker = {
    enabled: true,
    radius: 6

    // When hovered state to disabled and lineWidth to 0
    sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
    sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
    // Change the hover fillColor
    sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';

    Comment actions Permalink

Please sign in to leave a comment.