Search code examples
javascriptcanvasrgraph

Different color on specific point on RGraph line chart

I'm trying to specify a color in a point with highlightStyle: 'halo', and tickmarksStyle: ['circle'] defined.

Graph:

enter image description here

I want to change the color of those points to red if they surpass that blue line. The condition is no big deal but can't seem to figure it out.

Or, if it's more simple, change the line segment color to red if the main line surpass the blue lines.

I'm been looking at the Line chart API but can't find a parameter that works with my scenario.

What can I do?

Solution

  • If I understand your request correctly then the easiest way would be to use the filledThreshold and filledThresholdColors properties.

    Here's the code:

    new RGraph.Line({
    id: 'cvs',
    data: [d1, d2],
    options: {
        backgroundGridHlinesCount: 5,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        axes: false,
        filled: true,
        filledRange: true,
        filledRangeThreshold: 12,
        filledRangeThresholdColors: ['red', 'blue'],
        xaxisLabels: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P'],
        colors: ['transparent', 'transparent'],
        xaxisTickmarksCount: 15,
        tickmarksStyle: null
    }
}).draw();