Advanced tips

Methods and workarounds for accomplishing common techniques in chart design and specific tasks in everviz. This document is meant for any user willing to spend a few minutes to take their chart to the next level. These examples can be combined and modified practically any way you see fit. Welcome to the wonderful world of having the computer do your bidding!

How to use this document

Most examples starts with the line:
var n = ?, where ? is usually 2.
This is the only value you need to change to modify the example for your case, as we intended, you can of course change what you want. What value n actually is and refers to is explained in each example.

The basic steps to embed any code into your project, is to:

  1. Copy the custom code.
  2. Paste that into your custom code, making sure to remove anything that was there prior if you experience issues.

An alternative option is to save the example to your account, modifying the data and other options either before or after.

You will see a mention of some Highcharts.merge(true, options, { in every example.

Piece by piece, this means the following

Highcharts.merge                   | Access a function called merge from Highcharts
                (true,             | that copies values into
                        options,   | the options we have, from
                                 { | the options that follows from the open bracket

How to distinguish single axis label

Example

In this example n is the value on the X axis you wish to distinguish.

var n = 2
Highcharts.merge(true, options, {
  // Bold specific value
  xAxis: {
    labels: {
      formatter: function () {
        if (this.value === n) {
          return "<b style='font-size: 1.2em'>" + this.value + "</b>"
        }
        return this.value
      }
    }
  }
})

How to distinguish single data label

Example

In this example n is the value on the X axis you where you wish to distinguish the data label.

var n = 2
Highcharts.merge(true, options, {
  // Bold specific value
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        style: {
          fontWeight: 'normal'
        },
        formatter: function () {
          if (this.x === n) {
            return '<b style="fontSize: 1.2em">' + this.y + "</b>"
          }
          return this.y
        }
      }
    }
  }
})

How to show data label at single point

Example

In this example n is the value on the X axis you where you wish to show the data label.

var n = 2
Highcharts.merge(true, options, {
  // Show specific value
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: undefined,
        formatter: function () {
          if (this.x === n) {
            return this.y
          }
        }
      }
    }
  }
})

Note: Data label filter is also of use in some cases where you wish to conditionally show some points, not just one.

How to move axis labels in bar chart

Example

This is struggle is best illustrated by an image, notice how much space the category titles occupy on a mobile view:

Highcharts.merge(true, options, {
  // Adjust position and text properties of categories
  xAxis: {
    labels: {
      x: 2,
      align: 'left',
      style: {
        whiteSpace: 'nowrap',
        overflow: 'allow',
        textOverflow: 'ellipsis',
        fontWeight: 'bold'
      }
    },    
  },
  
  // Place categories inside graph
  plotOptions: {
    series: {
      pointPlacement: 'between'
    }
  }
})

How to set custom axis labels text

Example

This demonstrates how to modify a range of categorical names in the axis:

  • Q1 2020
  • Q1 2021
  • Q1 2022
  • Q2 2022

To strip away all occurrences of 'Q1 '. The code below is explained line by line in the example above.

Highcharts.merge(true, options, {
  xAxis: [{
    type: 'category',
    labels: {
      formatter: function () {
        return this.value.replace('Q1 ', '')
      }
    }
  }]
})

How to hide overflowing data labels in columns

Example

Stop showing data labels when boxes are below a certain height, threshold, in pixels. You may need to experiment with adjusting this value, as it doesn't take the font-size into account,

var threshold = 20
Highcharts.merge(true, options, {
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                format: undefined,
                formatter: function () {
                    if (this.point.shapeArgs.height < threshold) {
                        return
                    }
                   else {
                        return this.y
                    }
                }
            }
        }
    }
});

How to force single tick

Example

In this example n is the value on the X axis you wish to add. We also ensure to remove the very close value, 3.

var n = 3.14159
Highcharts.merge(true, options, {
  xAxis: {
    // Force specific tick
    tickPositioner: function () {
      this.tickPositions.push(n)
      return this.tickPositions
        .filter(x => x !== 3)      
    }
  }
})

Note: This example assumes you want to show the default ticks as well. If you truly only want to show a single tick, change this.tickPositions.push(n) to this.tickPositions = [n].

How to color individual data point

Example

This example shows how to modify the color of a series in a column or bar chart

In this example you need to change the "Europe" to the name of your series. Remember not to drop the quotes (")!

var loaded = false

function maybeChangeColor(dataPoint) {
  if (dataPoint.name == "Europe") {
    loaded = true
    dataPoint.update({
      color: "blue",
    })
  }
}

Highcharts.merge(true, options, {
  chart: {
    events: {
      render: function () {
        if (!loaded) {
          (this.series || []).forEach(function (s) {
            s.data.forEach(maybeChangeColor)
          })
        }
      }
    }
  }
})

How to distinguish series

Example

A missing step in the code is finding your series to distinguish as default by order position in Advanced > Series [order position] and set Opacity to 1

Highcharts.merge(true, options, {
  plotOptions: {
    series: {
      opacity: 0.2,
      states: {
        hover: {
          opacity: 1
        }
      }
    }
  }
})

How to set a plot line to distinguish

Example

Although we support adding plot lines in Basic > Annotations > Highlights, it is so far not possible to place it on a point and adjust the width. To do so, you need to head to Advanced > (X or Y) Axis [1] > Plot Lines [1]. Make sure to press the plus button to create one if it does not already exist.

From there, scroll down to the end and set the Value and Width. To make it appear on the top of your chart, you also need to set the Z Index, a good value to start with is 20.

Any remaining options can be set in Basic. We recommend to color your plot line with one of your primary colors, then reduce the lightness by some amount, and finally set an opacity. In this example, the Z index for grid lines on each axis was also set to -1 so as to appear below the plot line.

How to customize context menu button

Example

Also known as export options, has by default the hamburger symbol, hence it is also often called the hamburger menu. You might not want that, though, and will be delighted to hear that you can change it. 

Highcharts.merge(true, options, {
    exporting: {
        buttons: {
            contextButton: {
              // Remove the symbol  
              symbol: "",
                text: 'Options',
                theme: {
                    'stroke-width': 1,
                    stroke: '#0F172A',
                    // You can freely adjust the size of the button here
                    'font-size': 14,
                    // Corner radius
                    r: 5,
                }
            }
        }
    }
});

How to enable toggle for Linear and Logarithmic axis

Example

 Highcharts.merge(true, options, {
     exporting: {
         buttons: {
             lin: {
                 text: 'Linear',
                 onclick: function () {
                     this.yAxis[0].update({
                         type: 'linear'
                     });
                 }
             },
             log: {
                 text: 'Logarithmic',
                 onclick: function () {
                     this.yAxis[0].update({
                         type: 'logarithmic'
                     });
                 }
             }
         }
     }
 });

I still need help

Does the example not work for your chart or you need a generalized example? Message us at support@everviz.com and we will look into it!

There are multiple ways of solving many of these examples. The solution given to any one example is not the only solution. What to do may depend on previously existing options on your chart, other times it does not matter at all.

The two methods that have been used here, are:

  1. Programming the formatter^1 to look for specific information, then doing this or that based on whether we found what we were looking for.
  2. Scanning through all the datapoints to look for a specific value, then modifying that specific datapoint.

Tweaks to the method used may also depend on the chart type in question---line charts does not necessarily have named points, unlike bar charts!---whether you want to modify a range of values, or a discrete set of values.

Over time we wish to make this a solid and user-friendly system of ways to resolve all these variants of what you can do. Today, this document exist as a low-stakes brainstorming document, your feedback decides which direction we will take with these examples!

1. One instance of such is the data labels formatter.

Did you find what you were looking for? Thank you! There was a problem submitting your feedback. Please try again later.