fixed linechart margins

1 files changed, 6 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index ecb06f64f..777bf2f66 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -74,7 +74,7 @@ export class LineChart extends React.Component<LineChartProps> {
     }
     componentDidMount = () => {
         this._disposers.chartData = reaction(
-            () => ({ dataSet: this._lineChartData, w: this.props.width, h: this.props.height }),
+            () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
                 if (dataSet) {
                     this.drawChart([dataSet], this.rangeVals, w, h);
@@ -227,16 +227,16 @@ export class LineChart extends React.Component<LineChartProps> {
         }
 
         // creating the x and y scales
-        const xScale = scaleCreatorNumerical(xMin, xMax, 0, this.width);
-        const yScale = scaleCreatorNumerical(0, yMax, this.height, 0);
+        const xScale = scaleCreatorNumerical(xMin, xMax, 0, width);
+        const yScale = scaleCreatorNumerical(0, yMax,height, 0);
 
         // adding svg
         const margin = this.props.margin;
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
-            .attr('width', `${width - margin.right - margin.left}`)
-            .attr('height', `${height - margin.top - margin.bottom}`)
+            .attr('width', `${width +margin.left + margin.right}`)
+            .attr('height', `${height + margin.top + margin.bottom }`)
             .append('g')
             .attr('transform', `translate(${margin.left}, ${margin.top})`));
 
@@ -281,7 +281,7 @@ export class LineChart extends React.Component<LineChartProps> {
 
         svg.append('rect')
             .attr('class', 'overlay')
-            .attr('width', this.width)
+            .attr('width', width)
             .attr('height', this.height + margin.top + margin.bottom)
             .attr('fill', 'none')
             .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`)