The code

stackedArea
    .tooltipThreshold(400)
    .width(containerWidth)
    .on('customMouseOver', chartTooltip.show)
    .on('customMouseMove', function(dataPoint, topicColorMap, dataPointXPosition) {
        chartTooltip.update(dataPoint, topicColorMap, dataPointXPosition);
    })
    .on('customMouseOut', chartTooltip.hide);
container.datum(dataset.data).call(stackedArea);

chartTooltip
    .title('Testing tooltip');
tooltipContainer = d3.select('.metadata-group .vertical-marker-container');
tooltipContainer.datum([]).call(chartTooltip);
                

Colors

You can also check other color schemas:

Data Input

Check the data input schema of this chart.

Export Chart

You can also export this chart by pressing:

The code

// StackedAreChart Setup and start
stackedArea
    .tooltipThreshold(400)
    .width(containerWidth)
    .aspectRatio(0.6)
    .on('customMouseOver', function() {
        chartTooltip.show();
    })
    .on('customMouseMove', function(dataPoint, topicColorMap, dataPointXPosition) {
        chartTooltip.update(dataPoint, topicColorMap, dataPointXPosition);
    })
    .on('customMouseOut', function() {
        chartTooltip.hide();
    });
container.datum(dataset.data).call(stackedArea);

// Tooltip Setup and start
chartTooltip
    .title('Testing tooltip');

// Note that if the viewport width is less than the tooltipThreshold value,
// this container won't exist, and the tooltip won't show up
tooltipContainer = d3.select('.metadata-group .vertical-marker-container');
tooltipContainer.datum([]).call(chartTooltip);