cancel
Showing results for 
Search instead for 
Did you mean: 
Liliia_DevX
Sisense Team Member
Sisense Team Member

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:

 

Liliia_DevX_0-1684323464671.png

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:

Liliia_DevX_0-1684324286363.png

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:

 

Liliia_DevX_0-1684335146897.png

 

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:

 

Liliia_DevX_0-1684414187220.png

 

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.

Version history
Last update:
‎05-18-2023 07:12 AM
Updated by:
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: