Monthly Revenue (thousands)
$247K
);
}
```
### Recharts Theme Config
Apply these props to strip chartjunk:
```jsx
// Universal settings
const tufteTheme = {
xAxis: {
axisLine: false,
tickLine: false,
tick: { fontSize: 10, fill: '#999' },
},
yAxis: {
axisLine: false,
tickLine: false,
tick: { fontSize: 10, fill: '#999' },
// Often better to hide Y-axis and direct-label instead
},
grid: {
strokeDasharray: '3 3',
stroke: '#f0f0f0', // very faint if you must show
},
// NO tooltip by default — print values on chart
// NO legend — direct label instead
};
```
## D3-in-React Pattern (for Custom Charts)
For slopegraphs, custom dot plots, small multiples:
```jsx
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';
export default function Slopegraph({ data }) {
const svgRef = useRef();
useEffect(() => {
const svg = d3.select(svgRef.current);
const width = 400;
const height = 300;
const margin = { top: 20, right: 80, bottom: 20, left: 80 };
// Clear previous render
svg.selectAll('*').remove();
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => Math.max(d.q2, d.q3))])
.range([height - margin.bottom, margin.top]);
// Draw lines
svg.selectAll('line.slope')
.data(data)
.join('line')
.attr('class', 'slope')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr('y1', d => y(d.q2))
.attr('y2', d => y(d.q3))
.attr('stroke', d => d.q3 < d.q2 ? '#d73027' : '#ccc')
.attr('stroke-width', 1.5);
// Left labels + values
svg.selectAll('text.left-label')
.data(data)
.join('text')
.attr('class', 'left-label')
.attr('x', margin.left - 8)
.attr('y', d => y(d.q2))
.attr('text-anchor', 'end')
.attr('alignment-baseline', 'middle')
.attr('font-size', 11)
.attr('fill', '#1a1a1a')
.text(d => `${d.team} ${d.q2}`);
// Right values
svg.selectAll('text.right-label')
.data(data)
.join('text')
.attr('class', 'right-label')
.attr('x', width - margin.right + 8)
.attr('y', d => y(d.q3))
.attr('text-anchor', 'start')
.attr('alignment-baseline', 'middle')
.attr('font-size', 11)
.attr('fill', '#1a1a1a')
.text(d => d.q3);
// Column headers
svg.append('text')
.attr('x', margin.left)
.attr('y', 10)
.attr('text-anchor', 'middle')
.attr('font-size', 10)
.attr('fill', '#666')
.text('Q2');
svg.append('text')
.attr('x', width - margin.right)
.attr('y', 10)
.attr('text-anchor', 'middle')
.attr('font-size', 10)
.attr('fill', '#666')
.text('Q3');
}, [data]);
return