Fork me on GitHub

Default settings

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);
          

Custom configuration

Bar chart

Stack bar multiple value