Create vertical line in line chart with dates as x-axis

Sisense Employee

03-04-2024

Please try to use the following script as an example to implement your own solution:

widget.on('processresult', function(w, ev) {
    let targetDates = ["2013-04-22T00:00:00", "2013-05-14T00:00:00"]; // Change these to your desired dates
    let indices = [];

    targetDates.forEach((targetDate) => {
        let currentDate = new Date(targetDate);
        ev.rawResult?.values.forEach((v, i) => {
            // Assuming the x-axis values are dates, compare them with the target date
            let dataDate = new Date(v[0].data);
            if (currentDate.getTime() === dataDate.getTime()) {
                indices.push(i);
            }
        });
    });

    if (indices.length > 0) {
        ev.result.xAxis.plotLines = indices.map((index) => {
            return {
                color: '#FF0000',
                width: 2,
                dashStyle: "dash",
                value: index
            };
        });
    }
});

You need to adjust targetDates to make it work for the specific dates. It was tested with the following widget configuration:

I'm afraid we don't have a ready-to-use example script to show also labels and it requires a further development investigation and implementation.

Hope this code snippet helps!

Best Regards, Lily

eshaul

Data Storage

03-06-2024

Dear Liliia_DevX thanks a lot - that is working for me.

Unfortunately, the label feature is a must, I tried to add it to the plotLines property, but it's not showing, any idea why?

rapidbisupport

Data Pipeline

03-06-2024

Hi eshaul ,

I've had success in the past adding labels as plotBands, but not as plotLines.

You can try the following code to generate and add plotLines and Labels to either xAxis or yAxis at any given positions (for yAxis, values, or xAxis, category indexes). The following looks for the position of xAxis categories and then adds lines and labels to them.

function makePlotLine(color, style, width, position) {
  return {
    color: color,
    dashStyle: style,
    width: width,
    value: position,
    zIndex: 5
  }
}

function makeLabel(labelText, labelColor, position) {
  return {
    value: position,
    color: '#fff',
    label: {
      text: labelText,
      style: {
        color: labelColor
      }
    }
  }
}

const categoriesWithLine = ['07/2011', '01/2012']
widget.on('processresult', (w, args) => {
  args.result.xAxis.plotLines = []
  args.result.xAxis.plotBands = []
  for (let i = 0; i < categoriesWithLine.length; i++) {
    const currentCat = categoriesWithLine[i]
    const indexOfCurrentCat = args.result.xAxis.categories.indexOf(currentCat)
    const plotLine = makePlotLine('green', 'ShortDash', 2, indexOfCurrentCat)
    const label = makeLabel(`This is a label on ${currentCat}`, 'black', indexOfCurrentCat)
    args.result.xAxis.plotLines.push(plotLine)
    args.result.xAxis.plotBands.push(label)
  }
})

widget.on('ready', (w, args) => {
  $('svg .highcharts-plot-bands-labels-0', element).insertAfter('svg .highcharts-plot-bands-0', element)
})

This is tested and working in the following configuration against the Sample Retail dataset: