CODEWITHSUNDEEP
javascriptreactjshighcharts
aroundsix
aroundsix

Reputation: 131

Highcharts - Specific color zones for HighCharts navigator

Is there a way to add color zones to the High Charts navigator ? If it doesn't fall between a zone it should have a default color. Something like, from this value to this value it has this color, otherwise it's blue.

I basically have some reporting periods that have a start and end date and a specific color. I'd like that for each reporting period to appear with their respective color on the High Charts navigator. I have it somewhat working, using zones but for zones with no reporting period it takes the color of the next one.

This is what it currently looks like. Current status

And here's the code: 

const zones = reportingPeriods.map((rp, i) => {
    return {
        value: new Date(rp.endDate),
        color: rp.color
    }
})

const seriesData = _.map(graphData, (metricData, key) => {
    return {
        name: key,
        data: metricData.sort(function(a, b) {
            return a[0] - b[0];
        }),

        zoneAxis: 'x',
        zones: zones,
        tooltip: {
            valueDecimals: 0
        },

        visible: false
    }
})

const graphOptions = {
    rangeSelector: {
        selected: 1
    },
    navigator: {
        maskFill: 'rgba(0, 0, 0, 0.25)'
    },
    backgroundColor: {
        linearGradient: [0, 0, 500, 500],
        stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(200, 200, 255)']
        ]
    },
    title: {
        text: group.groupName
    },
    series: seriesData,
    credits: false,
    legend: {
        enabled: true
    }
}

Is there a way where you could define a start and end point for a zone ? and also restrict the coloring strictly to the navigator ?

Ideally it would be nice if the zones could be defined like this: 

from: rp.startDate,
to: rp.endDate,
color: rp.color

Any push in the right direction would be greatly appreciated.

Upvotes: 1

Views: 652

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

I've answered the questions below. Here is the TLDR fiddle example.

Is there a way where you could define a start and end point for a zone ?

The format you've suggested is invalid, but the workaround is to fill in the blanks with zones using the "default color" you want. That means changing your map to a more elaborate function. For example:

periods = [
  { start: 2,  end: 5,  color: 'green' },
  { start: 5,  end: 7,  color: 'pink' },
  { start: 10, end: 15, color: 'red' },
  { start: 19, end: 21, color: 'yellow' }
];

defaultColor = 'black';
zones = [];

for(var i = 0; i < periods.length; i++) {
  // This zone is a "in-between" zone to fill the blanks.
  zones.push({
    value: periods[i].start,
    color: defaultColor
  });

  // This zone is an actual period
  zones.push({
    value: periods[i].end,
    color: periods[i].color
  });
}

// This zone is cover the values from your last period to infinity
zones.push({
  color: defaultColor
});

Here I imagine the periods array to match your reportingPeriods and the zones array to be the end product which you apply to your series.

and also restrict the coloring strictly to the navigator ?

To only apply the zones to the navigator you simply use the navigator.series object. For example:

navigator: {
  series: {
    type: 'line',
    zones: zones
  }
}

And not apply them to the actual series.

Upvotes: 2

Related Questions