diff --git a/example/example.html b/example/example.html
new file mode 100644
index 0000000..9c6f55a
--- /dev/null
+++ b/example/example.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/examplePod.ts b/example/examplePod.ts
new file mode 100644
index 0000000..7f97ce2
--- /dev/null
+++ b/example/examplePod.ts
@@ -0,0 +1,61 @@
+import {
+ ChartwerkPod,
+ Serie,
+ Options
+} from '../dist/index';
+
+import * as d3 from 'd3';
+import * as _ from 'lodash';
+
+
+class ExamplePod extends ChartwerkPod {
+ lineGenerator = null;
+
+ constructor(
+ _el: HTMLElement,
+ _series: Serie[] = [],
+ _options: Options = {},
+ ) {
+ super(_el, _series, _options);
+ }
+
+ override renderMetrics(): void {
+ this.clearAllMetrics();
+ this.initLineGenerator();
+ for(const serie of this.series.visibleSeries) {
+ this.renderLine(serie);
+ }
+ }
+
+ clearAllMetrics(): void {
+ // TODO: temporary hack before it will be implemented in core.
+ this.chartContainer.selectAll('.metric-el').remove();
+ }
+
+ initLineGenerator(): void {
+ this.lineGenerator = d3.line()
+ .x(d => this.state.xScale(d[0]))
+ .y(d => this.state.yScale(d[1]));
+ }
+
+ renderLine(serie: Serie): void {
+ this.metricContainer
+ .append('path')
+ .datum(serie.datapoints)
+ .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
+ .attr('fill', serie.color)
+ .attr('stroke', serie.color)
+ .attr('stroke-width', 1)
+ .attr('stroke-opacity', 0.7)
+ .attr('pointer-events', 'none')
+ .attr('d', this.lineGenerator);
+ }
+
+ onMouseMove(): void {}
+ onMouseOver(): void {}
+ onMouseOut(): void {}
+ renderSharedCrosshair(values): void {}
+ hideSharedCrosshair(): void {}
+}
+
+export { ExamplePod };