How do I create a stacked area chart with historical average and forecast?

[satyasaadhak]

I need to create a stacked area chart like so

I'm able to get the chart value and areas fine. There doesn't appear to be an option for averages and forecast as depicted in the chart. Is this something that'll need a custom plugin, has anyone done something like this?

[stockiNail]

@satyasaadhak for the average line, you can use chartjs-plugin-annotation. Here is the sample about the average line: https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/line/average.html

About forecast, I think could calculate the forecast value/s (if you don't have them) and adds the forecast values as additional dataset.

[satyasaadhak]

That helped. Thanks.

Any reference on how I can get the text to appear just as in the image? The font-size and the position. This is what I have till now

[stockiNail]

Try:

{
  type: 'line',
  ....
  label: {
    ...
    position: 'start',
    font: {
      size: 16 // <-- I don't know which font has been used in the picture
    },
    yAdjust: -32 // <-- decide the best adjustment you  want.
  }
}

[satyasaadhak]

Hmm. I tried some of that. I'll give it another shot

[stockiNail]

Can you provide a codepen?

[satyasaadhak]

I must've been doing something else, this worked like a charm. Thanks a ton!

[satyasaadhak]

Is there any reference to all the custom plugins available? Since this annotations plugin is documented on the official site, I wondered if it is listed somewhere as well

[stockiNail]

Not all plugins but many: https://github.com/chartjs/awesome