Confidence Band Chart: Show 95% CI on a Line Graph

Overview

Use a confidence band line chart when you need to answer "how uncertain is this trend?" instead of showing only a single line. The shaded area represents possible values around your central estimate (for example 95% confidence interval), so readers can quickly see both direction and reliability. Because the band is a filled region, you can build the same shaded effect with our free area chart maker, which supports both simple and stacked fills.

When to use

• Show prediction uncertainty in forecasting models
• Display statistical confidence intervals
• Visualize error margins in measurements
• Present range of possible outcomes
• Communicate model uncertainty in data science

Not ideal

• When uncertainty is negligible or irrelevant
• With audiences unfamiliar with statistical concepts
• When exact bounds are more important than trends

Key variations

• Single vs multiple confidence levels (e.g., 50%, 90%, 95%)
• Symmetric vs asymmetric bands
• Constant vs time-varying confidence width
• Combined with actual vs predicted distinction

Use cases

• Weather forecasts: temperature prediction ranges
• Financial projections: revenue forecast with confidence bounds
• Machine learning: model predictions with uncertainty
• Medical trials: treatment effect estimates with confidence intervals
• Sales forecasting: upper and lower bound scenarios

Quick setup in Line Graph Maker

1. Keep three series in your data: Lower, Upper, and Value. If your source numbers are stored as JSON, convert them to CSV first with our free JSON to CSV converter.
2. Plot Value as the main line.
3. Render Lower and Upper as the shaded band to communicate uncertainty.
4. Add a short note like "Band = 95% CI" directly on the chart or subtitle.

Data (CSV)

date,Lower,Upper,Value
2012-08-28,-0.282,0.240,-0.162
2012-08-29,-0.042,0.060,-0.012
2012-08-30,-0.027,0.060,0.003
2012-08-31,-0.040,0.060,-0.010
2012-09-01,-0.038,0.060,-0.008
2012-09-02,-0.034,0.060,-0.004
2012-09-03,-0.038,0.060,-0.008
2012-09-04,-0.035,0.060,-0.005
2012-09-05,-0.039,0.060,-0.009
2012-09-06,-0.037,0.060,-0.007
2012-09-07,-0.035,0.060,-0.005
2012-09-08,-0.030,0.060,0.000
2012-09-09,-0.037,0.060,-0.007
2012-09-10,-0.033,0.060,-0.003
2012-09-11,-0.031,0.060,-0.001
2012-09-12,-0.030,0.060,0.000
2012-09-13,-0.033,0.060,-0.003
2012-09-14,-0.032,0.060,-0.002
2012-09-15,-0.029,0.060,0.001
2012-09-16,-0.027,0.060,0.003
2012-09-17,-0.021,0.060,0.009
2012-09-18,-0.052,0.060,-0.022
2012-09-19,-0.039,0.060,-0.009
2012-09-20,-0.030,0.060,0.000
2012-09-21,0.019,0.040,0.039
2012-09-22,-0.017,0.060,0.013
2012-09-23,-0.030,0.060,0.000
2012-09-24,-0.036,0.060,-0.006
2012-09-25,-0.036,0.060,-0.006
2012-09-26,-0.036,0.060,-0.006
2012-09-27,-0.034,0.060,-0.004
2012-09-28,-0.043,0.060,-0.013
2012-09-29,-0.039,0.060,-0.009
2012-09-30,-0.039,0.060,-0.009
2012-10-01,-0.043,0.060,-0.013
2012-10-02,-0.041,0.060,-0.011
2012-10-03,-0.041,0.060,-0.011
2012-10-04,-0.041,0.060,-0.011
2012-10-05,-0.040,0.060,-0.010
2012-10-06,-0.037,0.060,-0.007
2012-10-07,-0.034,0.060,-0.004
2012-10-08,-0.032,0.060,-0.002
2012-10-09,0.047,0.060,0.077
2012-10-10,0.094,0.060,0.124
2012-10-11,0.080,0.060,0.110
2012-10-12,0.057,0.060,0.087
2012-10-13,0.038,0.060,0.068
2012-10-14,0.030,0.060,0.060
2012-10-15,-0.042,0.060,-0.012
2012-10-16,-0.051,0.060,-0.021
2012-10-17,-0.042,0.060,-0.012
2012-10-18,-0.040,0.060,-0.010
2012-10-19,-0.038,0.060,-0.008
2012-10-20,-0.037,0.060,-0.007
2012-10-21,-0.034,0.060,-0.004
2012-10-22,-0.034,0.060,-0.004
2012-10-23,-0.036,0.060,-0.006
2012-10-24,-0.035,0.060,-0.005
2012-10-25,-0.035,0.060,-0.005
2012-10-26,-0.035,0.060,-0.005
2012-10-27,-0.034,0.060,-0.004
2012-10-28,-0.031,0.060,-0.001
2012-10-29,-0.033,0.060,-0.003
2012-10-30,-0.031,0.060,-0.001
2012-10-31,-0.030,0.060,0.000
2012-11-01,-0.032,0.060,-0.002
2012-11-02,-0.032,0.060,-0.002
2012-11-03,-0.030,0.060,0.000
2012-11-04,-0.031,0.060,-0.001
2012-11-05,-0.029,0.060,0.001
2012-11-06,-0.028,0.060,0.002
2012-11-07,-0.029,0.060,0.001
2012-11-08,-0.029,0.060,0.001
2012-11-09,-0.027,0.060,0.003
2012-11-10,-0.028,0.060,0.002
2012-11-11,-0.028,0.060,0.002
2012-11-12,-0.026,0.060,0.004
2012-11-13,-0.027,0.060,0.003
2012-11-14,-0.027,0.060,0.003
2012-11-15,-0.026,0.060,0.004
2012-11-16,-0.027,0.060,0.003
2012-11-17,-0.025,0.060,0.005
2012-11-18,-0.025,0.060,0.005
2012-11-19,-0.024,0.060,0.006
2012-11-20,-0.023,0.060,0.007
2012-11-21,-0.025,0.060,0.005
2012-11-22,-0.025,0.060,0.005
2012-11-23,-0.023,0.060,0.007
2012-11-24,-0.022,0.060,0.008
2012-11-25,-0.022,0.060,0.008
2012-11-26,0.004,0.060,0.034
2012-11-27,0.029,0.060,0.059
2012-11-28,0.049,0.060,0.079

The chart creates a confidence band by stacking two invisible lines (Lower and Upper bounds) to form a shaded area, with the Value line displayed prominently on top.

Important data format note: For the stacking technique to work correctly, the "Upper" column in the CSV should contain the difference between the upper bound and lower bound (Upper - Lower), not the actual upper bound value. This is because ECharts stacks values additively: Lower + (Upper - Lower) = actual upper bound. For example:

• If your lower bound is -0.282 and upper bound is -0.042
• The CSV should have: Lower = -0.282, Upper = 0.240 (which is -0.042 - (-0.282))

Performance tips

• Use area fill with low opacity for the band
• Clearly label confidence levels
• Consider hiding bands on hover to reveal values

FAQ

What do the different lines represent? In a confidence band chart:

• The central line shows your best estimate or prediction
• The upper bound represents the maximum expected value at a given confidence level
• The lower bound represents the minimum expected value
• The shaded band area between upper and lower bounds visualizes the uncertainty range

What confidence level should I use? 95% is most common in scientific contexts. 90% may be used for preliminary analysis, while 99% indicates higher certainty. Always label which confidence level you're displaying.

What is the difference between a confidence band and a prediction interval? A confidence band usually describes uncertainty around the estimated mean trend, while a prediction interval describes where future individual observations may fall. Prediction intervals are often wider. Pick one and label it explicitly to avoid confusion.

How do I explain confidence bands to non-technical audiences? Use simple language like:

• "The gray area shows where we expect the true value to be"
• "The shaded region represents our uncertainty"
• "The line is our best estimate, the band shows the range of possibilities"

Avoid statistical jargon like "confidence interval" or "standard error" unless your audience is technical.

Why does the band width change over time? Band width reflects changing uncertainty levels. Common reasons:

• Less data → wider bands (more uncertain)
• More volatility → wider bands
• Beginning/end of time series often have wider bands
• Events or interventions can temporarily increase uncertainty

Should I show multiple confidence levels? Generally no. Multiple bands (e.g., 50%, 90%, 95%) can confuse non-technical audiences. Use one level that matches your field's standards. In research papers, you might show 95% in the main chart and 90%/99% in appendices.

How to handle asymmetric confidence intervals? Use separate upper and lower bound columns in your data. Asymmetric bands are common with:

• Non-normal distributions
• Count data (Poisson models)
• Proportions near 0 or 1
• Log-transformed data

What color should I use for the confidence band? Gray is the most common and neutral choice. It doesn't imply good/bad judgments. If you need to match your brand colors, use a very light tint with low opacity (~20-30%) so it doesn't overwhelm the main line.