diff --git a/src/App.js b/src/App.js
index 8b76b37..7ca5049 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import './App.css';
import { BasicLineChart } from './components/basicLineChart';
import { BasicBarChart } from './components/basicBarChart';
import { BasicAreaChart } from './components/basicAreaChart';
+import { BasicLineTooltipChart } from './components/basicLineTooltipChart';
import { BasicPieChart } from './components/basicPieChart';
function App() {
@@ -23,6 +24,10 @@ function App() {
Basic Area Chart
+
+
Basic Area Chart
+
+
Basic Pie Chart
diff --git a/src/components/basicLineTooltipChart.js b/src/components/basicLineTooltipChart.js
new file mode 100644
index 0000000..ee99f53
--- /dev/null
+++ b/src/components/basicLineTooltipChart.js
@@ -0,0 +1,98 @@
+import { jsonList2 } from '../exampleData';
+import { colors } from '../colors';
+
+import { Axis } from '@visx/axis';
+import { curveNatural } from '@visx/curve';
+import { scaleLinear } from '@visx/scale';
+import { LinePath } from '@visx/shape';
+
+export function BasicLineTooltipChart(props) {
+ // Define the graph dimensions and margins
+ const width = props.width || 800;
+ const height = props.height || 500;
+ const padding = 50;
+
+ // Define the scales of the graph
+ // Linear scales are used for continuous data
+
+ // The x scale maps the x values to the width of the graph
+ const xScale = scaleLinear({
+ // The domain is the range of values the data can take on
+ domain: [0, jsonList2.length - 1], // The first and last x values, here: from 0 to the last index of the data
+
+ // The range is the size of the graph in pixels
+ range: [padding, width - padding], // The first and last x pixels
+ });
+
+ // The y scale maps the y values to the height of the graph
+ const yScale = scaleLinear({
+ // The domain is the range of values the data can take on
+ domain: [0, Math.max(...jsonList2.map((d) => d.y)) + 5], // The first and last y values, here: from 0 to the max y value + 5
+
+ // The range is the size of the graph in pixels
+ range: [height - padding, padding], // The first and last y pixels
+ });
+
+ return (
+
+ );
+}