1 files changed, 8 insertions, 6 deletions
diff --git a/src/client/views/nodes/DataVizBox/LineChart.tsx b/src/client/views/nodes/DataVizBox/LineChart.tsx
index 8a757866e..42e9da3d7 100644
--- a/src/client/views/nodes/DataVizBox/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/LineChart.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ChartData, DataPoint } from './ChartBox';
 // import d3
 import * as d3 from 'd3';
-import { minMaxRange, createLineGenerator, xGrid, yGrid, drawLine, scaleCreator } from './utils/D3Utils';
+import { minMaxRange, createLineGenerator, xGrid, yGrid, drawLine, xAxisCreator, yAxisCreator, scaleCreatorNumerical, scaleCreatorCategorical } from './utils/D3Utils';
 
 interface LineChartProps {
     data: ChartData;
@@ -45,8 +45,8 @@ export class LineChart extends React.Component<LineChartProps> {
 
     drawChart() {
         // clearing tooltip
-        d3.select('#chart-container').select('svg').remove();
-        d3.select('#chart-container').select('.tooltip').remove();
+        d3.select(this._chartRef.current).select('svg').remove();
+        d3.select(this._chartRef.current).select('.tooltip').remove();
 
         const margin = { top: 50, right: 50, bottom: 50, left: 50 };
         const { data } = this.props;
@@ -63,9 +63,9 @@ export class LineChart extends React.Component<LineChartProps> {
             // TODO: nda - error handle
             return;
         }
+        const xScale = scaleCreatorNumerical(xMin, xMax, 0, this.props.width);
         // adding x axis
-        const xScale = scaleCreator(xMin, xMax, 0, this.props.width);
-        const yScale = scaleCreator(0, yMax, this.props.height, 0);
+        const yScale = scaleCreatorNumerical(0, yMax, this.props.height, 0);
 
         // create a line function that takes in the data.data.x and data.data.y
         // TODO: nda - fix the types for the d here
@@ -74,6 +74,8 @@ export class LineChart extends React.Component<LineChartProps> {
         // create x and y grids
         xGrid(svg.append('g'), this.props.height, xScale);
         yGrid(svg.append('g'), this.props.width, yScale);
+        xAxisCreator(svg.append('g'), this.props.height, xScale);
+        yAxisCreator(svg.append('g'), this.props.width, yScale);
 
         // draw the line
         drawLine(svg.append('path'), data.data, lineGen);
@@ -94,7 +96,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const focus = svg.append('g').attr('class', 'focus').style('display', 'none');
         focus.append('circle').attr('r', 5).attr('class', 'circle');
         const tooltip = d3
-            .select('#chart-container')
+            .select(this._chartRef.current)
             .append('div')
             .attr('class', 'tooltip')
             .style('opacity', 0)