Showing results for 
Search instead for 
Did you mean: 

Line/Area Chart - Creating an Area Range

Sisense Team Member
Sisense Team Member

When creating a line chart you'd sometimes want to add a range area to emphasize an "Acceptable Range".

The following script will allow you to create a widget that looks as follows:


Notice the following modifications were made to the original widget:

  1. An area range was created to specify the acceptable range of values
  2. The line chart markers were colored according to whether they are in/out of range
  3. The OOTB tooltip was replaced with a tooltip that shows range + value

To implement this widget follow these steps:

Create a new Line Chart

Create a new line chart with three values: The lower range / The high Range / The actual value (make sure to follow this specific order).
The color set to the "Lower Range" will define the area range color.



Add the Following Widget Script

Add the following script to your widget:

widget.on('processresult', function(widget,result) {

// Collect objects from the widget
let lowRangeSeries = result.result.series[0]
let highRangeSeries = result.result.series[1]
let dataRangeSeries = result.result.series[2]

dataPointsCount =

// Create a new "Area Range" object
let newRangeSeries = JSON.parse(JSON.stringify(lowRangeSeries));
newRangeSeries.type = 'arearange'
newRangeSeries.fillOpacity = 0.3
newRangeSeries.marker = {enabled: false} = 'Range'

// Determine the maximal value
maxValue =[0].y;

for (let i =0 ; i < dataPointsCount ; i++) {
// Fix the data series's marker color[i].y = Math.round([i].y*100)/100
if([i].y >[i].y ||[i].y <[i].y)[i].marker.lineColor = 'red'
else[i].marker.lineColor = 'green'

// Add range values[i] = [i,Math.round([i].y*100)/100,Math.round([i].y*100)/100]

// Determine the maximal value
if ([i].y > maxValue) maxValue =[i].y;
if ([i].y > maxValue) maxValue =[i].y;
if ([i].y > maxValue) maxValue =[i].y;

// Remove the "High" & "Low" line charts

// Format the tooltip
result.result.tooltip.enabled = true;
result.result.tooltip.shared = true;
result.result.tooltip.crosshairs = true;
lang: {
decimalPoint: '.',
thousandsSep: ','

// Set the Y axis max range
result.result.yAxis[0].min - null;
result.result.yAxis[0].max = Math.floor(maxValue*1.02);

widget.on('beforedatapointtooltip', function(widget,result,abc) {
// Disable OOTB tooltips
result.cancel = true;