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
The basic steps to embed any code into your project, is to:
- Copy the custom code.
- 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
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
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
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 separate pie segments by patterns
If you would like your pie segments to have different patterns for accessibility purposes, this can be done in everviz using the pattern fill options. The chart below shows this concept:
How to move axis labels in bar chart
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
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
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
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
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)
})
}
}
}
}
})
For few items, you can also enable color by point and set a sequence of colors in your scheme with custom colors for each series.
How to rename series names from live sources
You can rename your series by adding some custom code telling everviz to ignore the first row of header names by default. To start, open up Custom Code and insert the following:
Highcharts.merge(true, options, {
data: {
startRow: 1,
firstRowAsNames: false
},
});
With that done, go over the Advanced Editor and navigate to the Series subsection. You'll see a list of series in order, these all have a "name" property that you can override. By default, it should be the header name, but you may have to reinsert the names you wanted to stay the same.
How to exclude historic data from live data sources
Insert the following custom code to ignore the first two months of your data, or replace nMonths=2 for for any other number to ignore that many months:
function subtractMonths(date, nMonths = 2) {
var d = new Date();
d.setMonth(d.getMonth() - nMonths);
return d;
}
Highcharts.merge(true, options, {
xAxis: [{
min: subtractMonths(new Date()).getTime()
}]
});
Variations of this code exist to account for days, for instance. Feel free to reach out to support@everviz.com if you need help.
How to stop series visibility through legend
It is possible to modify what happens when clicking the legend to disable its effect on series visibility.
Highcharts.merge(true, options, {
legend: {
itemStyle: {
cursor: 'default'
}
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
return false;
}
},
point: {
events: {
legendItemClick: function() {
return false;
}
}
}
}
}
})
How to distinguish series
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
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
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
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:
- Programming the formatter^1 to look for specific information, then doing this or that based on whether we found what we were looking for.
- 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.