diff --git a/html/gui/js/PlotlyChartWrapper.js b/html/gui/js/PlotlyChartWrapper.js
index 18df5fc413..2310c71e5e 100644
--- a/html/gui/js/PlotlyChartWrapper.js
+++ b/html/gui/js/PlotlyChartWrapper.js
@@ -91,7 +91,7 @@ XDMoD.utils.createChart = function (chartOptions, extraHandlers) {
// Format timezone -- Plotly does not support timezones
// Therefore, we need to utilize moment JS.
const axis = baseChartOptions.layout.swapXY ? 'yaxis' : 'xaxis';
- if (baseChartOptions.layout[axis].timeseries) {
+ if (baseChartOptions.layout[axis] && baseChartOptions.layout[axis].timeseries) {
const axisName = axis.slice(0, 1);
baseChartOptions.data.forEach((series) => {
series[axisName].forEach((elem, index, seriesArr) => {
diff --git a/html/gui/js/libraries/PlotlyUtilities.js b/html/gui/js/libraries/PlotlyUtilities.js
index c05e6cf9e3..5b742fedf0 100644
--- a/html/gui/js/libraries/PlotlyUtilities.js
+++ b/html/gui/js/libraries/PlotlyUtilities.js
@@ -315,13 +315,13 @@ function isTopLegend(layout) {
* @return {Object} update - Contains Plotly JS relayout updates and subtitle line count
*/
function adjustSubtitle(layout, subtitleIndex, legendTopCenter, firstRender) {
- let prevLineCount = layout.annotations[1].text.match(/
/g);
+ let prevLineCount = layout.annotations[`${subtitleIndex}`].text.match(/
/g);
if (prevLineCount) {
prevLineCount = prevLineCount.length;
} else {
prevLineCount = 1;
}
- const subtitle = layout.annotations[1].text.replace(/
/g, '');
+ const subtitle = layout.annotations[`${subtitleIndex}`].text.replace(/
/g, '');
const update = { chartUpdates: {}, subtitleLineCount: 0 };
if (subtitle.length > 0) {
if (!layout.width) {
@@ -390,19 +390,6 @@ function relayoutChart(chartDiv, adjHeight, firstRender = false, isExport = fals
}
}
- const isPie = chartDiv._fullData.length > 0 && chartDiv._fullData[0].type === 'pie';
-
- const subtitleUpdates = adjustSubtitle(chartDiv._fullLayout, subtitleIndex, topCenter, firstRender);
- update = subtitleUpdates.chartUpdates;
-
- if (isPie && topCenter && subtitleUpdates.subtitleLineCount > 0) {
- extraShift -= 10;
- }
-
- if (subtitleUpdates.subtitleLineCount > 0 && firstRender) {
- marginTop = subtitleUpdates.chartUpdates['margin.t'];
- }
-
// Handle
in title
// Grab the contents inbetween leading and trailing
tags
// Eslint throws invalid syntax on regex even though it is valid.
@@ -415,33 +402,49 @@ function relayoutChart(chartDiv, adjHeight, firstRender = false, isExport = fals
}
}
- // Observed inconsistency with margin when subtitle is one line long. Unsure of the cause.
- if (lineBreakCount > 0) {
- if (firstRender) {
- update['margin.t'] = marginTop + (titleHeight * lineBreakCount);
- } else if (subtitleUpdates.subtitleLineCount === 1) {
- marginTop = subtitleUpdates.chartUpdates['margin.t'] - (titleHeight * lineBreakCount);
- } else {
- marginTop -= (titleHeight * lineBreakCount);
+ let subtitleLineCount = 0;
+ if (subtitleIndex !== -1) {
+ const subtitleUpdates = adjustSubtitle(chartDiv._fullLayout, subtitleIndex, topCenter, firstRender);
+ update = subtitleUpdates.chartUpdates;
+ subtitleLineCount = subtitleUpdates.subtitleLineCount;
+
+ if (subtitleLineCount > 0 && firstRender) {
+ marginTop = subtitleUpdates.chartUpdates['margin.t'];
}
- if (topCenter) {
- if (subtitleUpdates.subtitleLineCount > 0) {
- marginTop += subtitleHeight + 5;
- update['legend.y'] -= 0.025;
- update['margin.t'] += chartDiv._fullLayout.legend._height + subtitleHeight;
+
+ // Observed inconsistency with margin when subtitle is one line long. Unsure of the cause.
+ if (lineBreakCount > 0) {
+ if (firstRender) {
+ update['margin.t'] = marginTop + (titleHeight * lineBreakCount);
+ } else if (subtitleLineCount === 1) {
+ marginTop = subtitleUpdates.chartUpdates['margin.t'] - (titleHeight * lineBreakCount);
} else {
- marginTop -= chartDiv._fullLayout.legend._height / 2;
+ marginTop -= (titleHeight * lineBreakCount);
+ }
+ if (topCenter) {
+ if (subtitleLineCount > 0) {
+ marginTop += subtitleHeight + 5;
+ update['legend.y'] -= 0.025;
+ update['margin.t'] += chartDiv._fullLayout.legend._height + subtitleHeight;
+ } else {
+ marginTop -= chartDiv._fullLayout.legend._height / 2;
+ }
}
}
}
- if (topCenter && subtitleUpdates.subtitleLineCount === 0 && !isPie) {
+ const isPie = chartDiv._fullData.length > 0 && chartDiv._fullData[0].type === 'pie';
+ if (isPie && topCenter && subtitleLineCount > 0) {
+ extraShift -= 10;
+ }
+
+ if (topCenter && subtitleLineCount === 0 && !isPie) {
extraShift += 15;
}
marginTop += extraShift;
- if ((titleIndex === -1 || chartDiv._fullLayout.annotations[titleIndex].text.length === 0) && subtitleUpdates.subtitleLineCount === 0) {
+ if ((titleIndex === -1 || chartDiv._fullLayout.annotations[titleIndex].text.length === 0) && subtitleLineCount === 0) {
if (topCenter) {
update['legend.y'] = 1.0;
} else {
@@ -452,17 +455,17 @@ function relayoutChart(chartDiv, adjHeight, firstRender = false, isExport = fals
const titleYShift = (marginTop + legendHeight) - titleHeight;
if (titleIndex !== -1) {
- update[`annotations[${titleIndex}].yshift`] = subtitleUpdates.subtitleLineCount >= 3 ? titleYShift + 5 : titleYShift;
+ update[`annotations[${titleIndex}].yshift`] = subtitleLineCount >= 3 ? titleYShift + 5 : titleYShift;
}
if (subtitleIndex !== -1) {
- update[`annotations[${subtitleIndex}].yshift`] = titleYShift - (subtitleHeight * subtitleUpdates.subtitleLineCount);
+ update[`annotations[${subtitleIndex}].yshift`] = titleYShift - (subtitleHeight * subtitleLineCount);
}
const marginBottom = chartDiv._fullLayout._size.b;
let pieChartXShift = 0;
if (isPie) {
- pieChartXShift = subtitleUpdates.subtitleLineCount > 0 ? 2 : 1;
+ pieChartXShift = subtitleLineCount > 0 ? 2 : 1;
}
const shiftYDown = marginBottom * -1;