diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index fa8810335d8..ee1cf28021e 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -50,6 +50,10 @@ export class PieChart extends PureComponent { draw() { const { datapoints, pieType, strokeWidth } = this.props; + if (datapoints.length === 0) { + return; + } + const data = datapoints.map(datapoint => datapoint.value); const names = datapoints.map(datapoint => datapoint.name); const colors = datapoints.map(datapoint => datapoint.color); @@ -102,31 +106,41 @@ export class PieChart extends PureComponent { } render() { - const { height, width } = this.props; + const { height, width, datapoints } = this.props; - return ( -
-
(this.containerElement = element)} - className="piechart-container" - style={{ - height: `${height * 0.9}px`, - width: `${Math.min(width, height * 1.3)}px`, - }} - > - (this.svgElement = element)} /> -
-
(this.tooltipElement = element)}> -
-
(this.tooltipValueElement = element)} - /> + if (datapoints.length > 0) { + return ( +
+
(this.containerElement = element)} + className="piechart-container" + style={{ + height: `${height * 0.9}px`, + width: `${Math.min(width, height * 1.3)}px`, + }} + > + (this.svgElement = element)} /> +
+
(this.tooltipElement = element)}> +
+
(this.tooltipValueElement = element)} + /> +
-
- ); + ); + } else { + return ( +
+
+ No data points +
+
+ ); + } } }