Conditionally Colored X-Axis Labels On Bar Chart

[intapiuser]

Introduction

The code below allows you to color the x axis labels for each category of a bar chart based on the color of a secondary series.

It also then hides the secondary series from being plotted.

Steps

STEP 1

The first step is to create a bar chart widget and add primary and secondary measures (series).

STEP 2

Add a conditional color by first clicking on the color button under the secondary series and then clicking on conditional.

Set your desired colors, then click OK and ensure bar colors are as intended.

STEP 3

Open the widget editor (pencil) and click edit script (options). Paste the following code into the script editor:

// The following Script will conditionally color the X Axis labels for series 0 (first value series)
// based on the conditional color values specified in series 1 (second value series).
// It will then hide series 1 from displaying

widget.on('processresult',function (se, ev) {
var cats = ev.result.xAxis.categories; // Stores the categories displayed on the X axis
var colors = []; // Creates empty color array corresponding to category array
 
for (var i = 0; i < cats.length; i++) { // Stores conditional colors for each element from series 1
 colors[i] = ev.result.series[1].data[i].color;
}

 ev.result.series.splice(1,1); // Removes Series 1

 ev.result.xAxis.labels.formatter = function() { // Formats each element in series 0
  var catIndex = cats.indexOf(this.value); // Searches cats array for each label and creates index
  
  if (catIndex > -1) { // If the label value is present in cats array, color label based on corresponding value from colors array
   catColor = colors[catIndex];
   return '' + this.value + ''; // Returns HTML format
  } 
  else {
   return this.value; // Returns default format if label is not present in cats array
  }
 }
})

The secondary series should now be hidden, and the axis labels should be colored accordingly.

STEP 4

Hit Save. Refresh the page. Hit Apply.

Note: This script may be tweaked to work with other chart types.

Enjoy!