FusionCharts - Time span marker tooltips
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div id="container">FusionCharts will render here</div>
JavaScript
const URL_DATA = 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/fusiontime-components-time-span-marker-full/data.json';
const URL_SCHEMA = 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/fusiontime-components-time-span-marker-full/schema.json';
const jsonify = res => res.json();
const dataFetch = fetch(URL_DATA).then(jsonify);
const schemaFetch = fetch(URL_SCHEMA).then(jsonify);
Promise.all([dataFetch, schemaFetch]).then(([data, schema]) => {
var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema);
new FusionCharts({
type: 'timeseries',
renderAt: 'container',
width: '95%',
height: 450,
dataSource: {
data: fusionTable,
caption: {
text: 'Interest Rate Analysis'
},
subCaption: {
text: 'Federal Reserve (USA)'
},
yAxis: [{
plot: 'Interest Rate',
format: {
suffix: '%'
},
title: 'Interest Rate'
}],
xAxis: {
plot: 'Time',
showTimeSpanMarkerTooltipAt: 0, //Change to 1 to modify the behavior of time span marker tootips
timemarker: [{
start: 'Mar-1980',
end: 'Jun-1983',
label: 'US inflation peaked at 14.8%.',
timeFormat: "%b-%Y",
type: 'full',
style: {
marker: {
fill: '#f8b8b7'
}
}
},
{
start: 'Jun-1988',
end: 'dec-1990',
label: 'US inflation peaked at 9.7%.',
timeFormat: "%b-%Y",
type: 'full',
style: {
marker: {
fill: '#f8b8b7'
}
}
...