1 files changed, 14 insertions, 4 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index cead40d92..27653b847 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -53,7 +53,7 @@ export class PieChart extends React.Component<PieChartProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -63,6 +63,14 @@ export class PieChart extends React.Component<PieChartProps> {
             .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
+    @computed get graphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Pie Chart";
+        }
+        else return ax1 + " by " + ax0 + " Pie Chart";
+    }    
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -333,7 +341,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .append("g")
         arcs.append("path")
             .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
-            .attr("class", `${pieDataSet[0][percentField]} slice`)
+            .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
         arcs.append("text")
@@ -373,8 +381,10 @@ export class PieChart extends React.Component<PieChartProps> {
         else selected = 'none';
         return (
             this.props.axes.length >= 1 ? (
-            <div ref={this._piechartRef} className="chart-container">
-                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
+            <div className="chart-container">
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );