Forum Discussion
Hi eshaul ,
Please review the example scripts provided in the "How to Get a Vertical Line in the X-Axis in a Line Chart" article and let us know if it helps to achieve your goal.
Best,
Lily
Hi @Liliia_DevX ,
As i wrote, the reference was not helpful, any other idea where can i look?
- Liliia_DevX03-04-2024Sisense Employee
Hi eshaul,
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
- eshaul03-06-2024Data Storage
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?
- rapidbisupport03-06-2024Data Pipeline
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:
You can get more info on plotBand and plotLine configuration options here:
Plot bands and plot lines | Highcharts
Let me know how you go?