Source code:
const verticalDividerPlugin = verticalDivider();
const markersPlugin = markers();
const tooltipPlugin = tooltip();
const lineChart = line()
.on(chartEvents.chartMouseEnter, (x, y) => {
verticalDividerPlugin.show();
})
.on(chartEvents.chartMouseLeave, (x, y) => {
verticalDividerPlugin.remove();
markersPlugin.remove();
tooltipPlugin.remove();
})
.on(chartEvents.chartMouseMove, (options) => {
verticalDividerPlugin.update(options);
markersPlugin.show(options);
tooltipPlugin.show(options);
});
const chartContainer = d3.select('.default-chart');
chartContainer.datum(lineChartData).call(lineChart);
const metadataContainer = d3.select('.default-chart .metadata-container');
metadataContainer.datum([]).call(verticalDividerPlugin);
metadataContainer.datum([]).call(markersPlugin);
metadataContainer.datum([]).call(tooltipPlugin);