diff --git a/src/client/app/components/LineChartComponent.tsx b/src/client/app/components/LineChartComponent.tsx index c0bc899f3..0fcdd9453 100644 --- a/src/client/app/components/LineChartComponent.tsx +++ b/src/client/app/components/LineChartComponent.tsx @@ -73,14 +73,13 @@ export default function LineChartComponent() { return ; } - - // Check if there is at least one valid graph - const enoughData = data.find(data => data.x!.length > 1); // Customize the layout of the plot // See https://community.plotly.com/t/replacing-an-empty-graph-with-a-message/31497 for showing text not plot. if (data.length === 0) { return

{`${translate('select.meter.group')}`}

; - } else if (!enoughData) { + } + // Checks if there is enough data for at least one valid graph + else if (!data[0].x) { return

{`${translate('no.data.in.range')}`}

; } else { return ( @@ -93,7 +92,8 @@ export default function LineChartComponent() { legend: { x: 0, y: 1.1, orientation: 'h' }, // 'fixedrange' on the yAxis means that dragging is only allowed on the xAxis which we utilize for selecting dateRanges yaxis: { title: unitLabel, gridcolor: '#ddd', fixedrange: true }, - xaxis: { rangeslider: { visible: true }, showgrid: true, gridcolor: '#ddd' } + //Range must be between these values to allow error bars to show properly + xaxis: { rangeslider: { visible: true }, showgrid: true, gridcolor: '#ddd', range: [data[0].x[0], data[0].x[data[0].x.length - 1]]} }} config={{ responsive: true,