Skip to content

Instantly share code, notes, and snippets.

@pbeshai
Last active August 29, 2015 14:20
Show Gist options
  • Save pbeshai/cbf60844932ecb81640e to your computer and use it in GitHub Desktop.
Save pbeshai/cbf60844932ecb81640e to your computer and use it in GitHub Desktop.
.line-chart .highlight-mark {
fill: #FA7F9F;
stroke: #891836;
stroke-width: 1px;
}
render() {
const { data, width, height, xKey, yKey, highlight } = this.props;
const { x, y, line } = this._chartComponents();
let highlightMark;
if (highlight) {
highlightMark = <circle cx={x(highlight[xKey])} cy={y(highlight[yKey])} r={4}
className='highlight-mark' />;
}
return (
<div>
<svg ref='svg' width={width} height={height} className='chart line-chart'>
<path d={line(data)} className='series' />
{highlightMark}
</svg>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment