How to maintain the continuity in connecter lines for zero values in a Plotly.js Waterfall...

I'm working with a Waterfall chart in Plotly.js and facing an issue where the connecting lines between bars break when any of the values are zero. I want to maintain the continuity of the connecting lines even if there are zero values in the dataset.

Here’s a simplified version of my code:

const capex = this.data["CapEx ($/Kg)"] || 0;
const stackReplacements = this.data["Stack Replacements ($/Kg)"] || 0;
const electricityCost = this.data["Electricity Cost ($/Kg)"] || 0;
const fixedOpex = this.data["Fixed Opex ($/Kg)"] || 0;
const ptc = this.data["Production Tax Credit ($/Kg)"] || 0;
const lcoh = capex + stackReplacements + electricityCost + fixedOpex;
const post45VLCOH = lcoh + ptc;
const yValues = [capex, stackReplacements, electricityCost, fixedOpex, lcoh, ptc, post45VLCOH];
const smallValue = 0.001; // Small value to replace zero
const adjustedYValues = yValues.map(value => value === 0 ? smallValue : value);
const textValues = yValues.map(value => value.toFixed(2));

const trace = {
type: 'waterfall',
name: 'Waterfall Chart',
orientation: 'v',
measure: ['relative', 'relative', 'relative', 'relative', 'total', 'relative', 'total'],
x: ['Capex', 'Cell service', 'Electricity', 'Fixed Opex', 'LCOH', 'PTC', 'Post-45V LCOH'],
y: adjustedYValues,
connector: {
line: {
color: 'rgba(0, 0, 0, 0.5)',
width: 1,
dash: 'solid' // Set the line style
}
},
decreasing: { marker: { color: '#F066AC' } },
increasing: { marker: { color: '#046CC4' } },
totals: { marker: { color: '#3C8454' } },
text: textValues,
textposition: 'outside',
};

const layout = {
xaxis: {
fixedrange: true,
},
yaxis: {
title: 'Contributions to LCOH ($/Kg)',
fixedrange: true,
},
showlegend: false,
dragmode: false,
bargap: 0.3,
margin: { t: 50, b: 50, r: 50, l: 50 },
};

const options = {
responsive: true,
displayModeBar: true,
modeBarButtonsToRemove: ['select2d', 'lasso2d'],
toImageButtonOptions: {
format: 'png',
filename: 'LCOH Breakdown',
height: 500,
width: 700,
scale: 1,
},
displaylogo: false,
};

Plotly.newPlot(this.elementRef.nativeElement, [trace], layout, options);


When I run this code, the connecting lines break at the "Zero" value. Is there a way to modify the chart or the data so that the lines remain continuous throughout the chart, regardless of zero values? Any suggestions or workarounds would be greatly appreciated!

Continue reading...