chartletv0.21.0chartlet.casoon.de

← All examples

Revenue against forecast

Weekly revenue against its forecast on a dark theme, with both layers naming their own color — one as a hex value, one as a CSS variable the host page owns.

Revenue against forecast

examples/revenue-vs-forecast.json
{
  "schemaVersion": 1,
  "type": "time",
  "title": "Revenue against forecast",
  "description": "Weekly revenue in thousands next to the forecast band's centre line; both layers name their own color.",
  "source": "Example data, chartlet",
  "theme": "dark",
  "showValues": false,
  "timeAxis": {
    "timezone": "UTC",
    "title": "Week starting"
  },
  "panes": [
    {
      "valueAxis": {
        "title": "Revenue in thousands"
      },
      "layers": [
        {
          "mark": "line",
          "name": "Revenue",
          "color": "#7ea6ff",
          "points": [
            {
              "time": 1769990400,
              "value": 96
            },
            {
              "time": 1770595200,
              "value": 104
            },
            {
              "time": 1771200000,
              "value": 99
            },
            {
              "time": 1771804800,
              "value": 118
            },
            {
              "time": 1772409600,
              "value": 131
            },
            {
              "time": 1773014400,
              "value": 127
            },
            {
              "time": 1773619200,
              "value": 140
            },
            {
              "time": 1774224000,
              "value": 152
            }
          ]
        },
        {
          "mark": "line",
          "name": "Forecast",
          "color": "var(--chart-forecast)",
          "points": [
            {
              "time": 1769990400,
              "value": 100
            },
            {
              "time": 1770595200,
              "value": 102
            },
            {
              "time": 1771200000,
              "value": 108
            },
            {
              "time": 1771804800,
              "value": 112
            },
            {
              "time": 1772409600,
              "value": 120
            },
            {
              "time": 1773014400,
              "value": 126
            },
            {
              "time": 1773619200,
              "value": 134
            },
            {
              "time": 1774224000,
              "value": 140
            }
          ]
        }
      ]
    }
  ]
}
Revenue against forecast
Revenue against forecastWeekly revenue in thousands next to the forecast band's centre line; both layers name their own color.801001201401602026-02-022026-02-092026-02-162026-02-232026-03-022026-03-092026-03-162026-03-23Revenue in thousandsRevenueForecast2026-02-02 – Revenue: 962026-02-09 – Revenue: 1042026-02-16 – Revenue: 992026-02-23 – Revenue: 1182026-03-02 – Revenue: 1312026-03-09 – Revenue: 1272026-03-16 – Revenue: 1402026-03-23 – Revenue: 1522026-02-02 – Forecast: 1002026-02-09 – Forecast: 1022026-02-16 – Forecast: 1082026-02-23 – Forecast: 1122026-03-02 – Forecast: 1202026-03-09 – Forecast: 1262026-03-16 – Forecast: 1342026-03-23 – Forecast: 140Week starting

Source: Example data, chartlet

Show chart data
Data for Revenue against forecast
TimeRevenueForecast
2026-02-0296100
2026-02-09104102
2026-02-1699108
2026-02-23118112
2026-03-02131120
2026-03-09127126
2026-03-16140134
2026-03-23152140
  • Time series (dark)
  • Compare two series over time