Threshold-Based Conditional Plot Bands Colors For Cartesian and Polar Charts
Plot bands in charts are visual elements that highlight specific ranges along the x-axis or y-axis, usually to emphasize certain areas of interest. These bands are typically shaded or colored differently from the rest of the chart, making them easy to distinguish. They often mark thresholds, target ranges, or critical areas.
Here are some examples of where plot bands can be useful:
- In a performance chart, they can indicate acceptable and unacceptable performance ranges.
- In a control chart, they can highlight control limits and help identify deviation zones.
- In a financial chart, they can represent budget limits or profit margins, showing where financial performance is on target or off track.
- In a temperature chart, they can illustrate safe operating ranges for machinery or environmental conditions.
- In a sales chart, they can mark seasonal trends or sales targets to indicate where performance is expected to peak.
The widget script below can be used to set conditional plot band (background) colors on Cartesian charts (Line, Column, Bar, Area, Scatter, and Box & Whisker) and Polar charts based on defined thresholds.
/*** This script is used to create colored plot bands based on defined thresholds.
This works for all Cartesian charts (Line, Column, Bar, Area, Scatter, Box & Whisker) as well as Polar chart. ***/
widget.on("processresult", function (widget, args){
args.result.yAxis[0].plotBands = [
//Define the color and the thresholds of each plot band in an object literal like shown in the examples below
{
color: '#ACACAC',
from: Number.MIN_SAFE_INTEGER, //this represents the smallest integer value that can be safely represented in JavaScript -9007199254740991
to: -3
},
{
color: '#25AD84',
from: -3,
to: -2
},
{
color: '#FFB74B',
from: -2,
to: -1
},
{
color: '#F5435C',
from: -1,
to: 0
},
{
color: '#F5435C',
from: 0,
to: 1
},
{
color: '#FFB74B',
from: 1,
to: 2
},
{
color: '#25AD84',
from: 2,
to: 3
},
{
color: '#ACACAC',
from: 3,
to: Number.MAX_SAFE_INTEGER //this represents the largest integer value that can be safely represented in JavaScript, i.e. 9007199254740991
}
];
});
For more information about customizing Sisense dashboards and widgets using JavaScript, please refer to these articles:
- Customizing Sisense using JavaScript
- Extend The Functionality Of An Existing Widget
- Highcharts API Documentation (for Highcharts-powered widget types: Column, Bar, Area, Pie, Polar, Scatter, and Box & Whisker)
