Multiple reference lines on same chart
Adding multiple reference lines to the chart to indicate targets or threshold.
Loading data for chart...
js
Copy
Promise.all([
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/multiple-reference-lines-on-same-chart-data.json"
),
loadData(
"https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/multiple-reference-lines-on-same-chart-schema.json"
)
]).then(function(res) {
const data = res[0];
const schema = res[1];
const dataStore = new FusionCharts.DataStore();
const dataSource = {
chart: {},
caption: {
text: "Pollution Control Report of China Town"
},
yaxis: [
{
plot: [
{
value: "NMHC"
},
{
value: "Nitrogen dioxide"
}
],
title: "Pollutants Concentration (in µg/m³)",
referenceline: [
{
label: "Controlled NMHC",
value: "150",
style: {
marker: {
fill: "#A4A7D5",
stroke: "#A4A7D5"
}
}
},
{
label: "Controlled NO₂",
value: "80",
style: {
marker: {
fill: "#87DEDB",
stroke: "#87DEDB"
}
}
}
]
}
]
};
dataSource.data = dataStore.createDataTable(data, schema);
new FusionCharts({
type: "timeseries",
renderAt: "chart-container",
width: "100%",
height: "500",
dataSource: dataSource
}).render();
});
html
Copy
<div id="chart-container"></div>