SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Fan Charts Type
The Fan Charts Type

Fan Charts are provided by using multiple Band Series on the same chart.

The JavaScript Fan Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com

Fast, Realtime JavaScript Fan Charts by SciChart.js

 

Create a Fan Chart

To create a Javascript Fan Chart with SciChart.js, use the following code:

JavaScript Line Chart
Copy Code
import {XyyDataSeries} from "scichart/Charting/Model/XyyDataSeries";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {XyDataSeries} from "scichart/Charting/Model/XyDataSeries";
import {FastLineRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import {ENumericFormat} from "scichart/Charting/Visuals/Axis/LabelProvider/NumericLabelProvider";
import {FastBandRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/FastBandRenderableSeries";

// Create a SciChartSurface
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
// Add an XAxis, YAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { labelFormat: ENumericFormat.Date_DDMMYYYY}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Generates some data for the example as an array of TVarPoint: {
//     date: number;
//     actual: number;
//     varMax: number;
//     var4: number;
//     var3: number;
//     var2: number;
//     var1: number;
//     varMin: number;
// }
const varianceData = getVarianceData();
// To render the fan chart, we use a Line Chart with XyDataSeries
// and three Band charts with XyyDataSeries
const actualDataSeries = new XyDataSeries(wasmContext);
const variance3DataSeries = new XyyDataSeries(wasmContext);
const variance2DataSeries = new XyyDataSeries(wasmContext);
const variance1DataSeries = new XyyDataSeries(wasmContext);
actualDataSeries.appendRange(varianceData.map(v => v.date), varianceData.map(v => v.actual));
variance3DataSeries.appendRange(varianceData.map(v => v.date), varianceData.map(v => v.varMin), varianceData.map(v => v.varMax));
variance2DataSeries.appendRange(varianceData.map(v => v.date), varianceData.map(v => v.var1), varianceData.map(v => v.var4));
variance1DataSeries.appendRange(varianceData.map(v => v.date), varianceData.map(v => v.var2), varianceData.map(v => v.var3));
// Add a line series with the Xy data (the actual data)
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: actualDataSeries,
    stroke: "Red",
}));
// Add band series with progressively higher opacity for the fan variance data
sciChartSurface.renderableSeries.add(new FastBandRenderableSeries(wasmContext, {
    dataSeries: variance3DataSeries,
    opacity: 0.15,
    fill: "Red",
    strokeY1: "#00000000"
}));
sciChartSurface.renderableSeries.add(new FastBandRenderableSeries(wasmContext, {
    dataSeries: variance2DataSeries,
    opacity: 0.33,
    fill: "Red",
    strokeY1: "#00000000"
}));
sciChartSurface.renderableSeries.add(new FastBandRenderableSeries(wasmContext, {
    dataSeries: variance1DataSeries,
    opacity: 0.5,
    fill: "Red",
    strokeY1: "#00000000"
}));

In the code above: