diff options
| author | srichman333 <sarah_n_richman@brown.edu> | 2023-07-09 12:28:51 -0400 |
|---|---|---|
| committer | srichman333 <sarah_n_richman@brown.edu> | 2023-07-09 12:28:51 -0400 |
| commit | 9418db69bad9e6cc862ccccb95e04d9a9430c283 (patch) | |
| tree | a3c3ba777e54839a775cbadb749006e01c6fc281 /src/client/views/nodes/DataVizBox/components/LineChart.tsx | |
| parent | 7aa9c94d3033c616e61b7406573d3c7ca5ce7909 (diff) | |
chart axis labels
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/LineChart.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 289cecb6b..b1a759c1f 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -240,6 +240,7 @@ export class LineChart extends React.Component<LineChartProps> { const svg = (this._lineChartSvg = d3 .select(this._lineChartRef.current) .append('svg') + .attr("class", "graph") .attr('width', `${width + margin.left + margin.right}`) .attr('height', `${height + margin.top + margin.bottom}`) .append('g') @@ -295,6 +296,20 @@ export class LineChart extends React.Component<LineChartProps> { .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0)) .on('mousemove', mousemove) .on('click', onPointClick); + + // axis titles + svg.append("text") + .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")") + .style("text-anchor", "middle") + .text(this.props.axes[0]); + svg.append("text") + .attr("transform", "rotate(-90)") + .attr("x", -(height/2)) + .attr("y", -20) + .attr("height", 20) + .attr("width", 20) + .style("text-anchor", "middle") + .text(this.props.axes[1]); }; private updateTooltip( |