This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Cookie Policy. Click Preferences to customize your cookie settings.
on - edited on by
jcordell
How to Get a Vertical Line in the X-Axis in a Line Chart
This article explains how to get a vertical line in the x-axis in a Line chart and covers 3 use-cases:
1. A vertical line on a maximum value (metric).
2. A vertical line when x-axis category is equal to zero.
3. A vertical line where a value equals to a specific value/number.
For example, you have the data range in the x-axis as in the screenshot below:
A vertical line on a maximum value (metric)
If you want to highlight the maximum value on the Line chart, you can use the JavaScript code snippet below:
widget.on('processresult', function(w, ev) {
let max = 0
let index = 0
ev.rawResult?.values.forEach((v, i) => {
if (v[1].data > max) {
max = v[1].data
index = i
}
})
ev.result.xAxis.plotLines = [{
color: '#FF0000',
width: 2,
dashStyle: "dash",
value: index
}]
})
The widget with the script looks like the below:
A vertical line when the x-axis category is equal to zero
If you want to add the vertical line to the zero value on the x-axis, please try the script below:
widget.on('processresult', function(w, ev) {
let index
ev.rawResult?.values.forEach((v, i) => {
if (v[0].data === 0) {
index = i
}
})
if (index) {
ev.result.xAxis.plotLines = [{
color: '#FF0000',
width: 2,
dashStyle: "dash",
value: index
}]
}
})
The widget with the script looks like the below:
A vertical line where a value equals a specific number
If you need to highlight a specific value with the help of the vertical line, put a number you need into (v[1].data === 3) block (instead of 3).
let indexArray = []
widget.on('processresult', function(w, ev) {
ev.rawResult?.values.forEach((v, i) => {
if (v[1].data === 3) {
indexArray.push(i)
}
})
indexArray.forEach(index => {
if (!ev.result.xAxis.plotLines) {
ev.result.xAxis.plotLines = []
}
ev.result.xAxis.plotLines.push({
color: '#FF0000',
width: 2,
dashStyle: "dash",
value: index
})
})
})
The widget will look like below:
Feel free to use these code snippets and modify them according to your needs!
Disclaimer: Please note, that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their own environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you “as-is” and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding which is outside the Sisense product development environment and is therefore not covered by Sisense warranty and support services.
