How to add inline legends to line / area mixed chart in highchart

0
votes

I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)

https://www.highcharts.com/demo/area-stacked-percent

These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot

In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:

https://jsfiddle.net/hkpna40r/1/

  annotations: [{
    labelOptions: {
      backgroundColor: 'rgba(255,255,255,0.5)',
      verticalAlign: 'top',
      y: 4
    },
    labels: [{
      point: {
        xAxis: 0,
        yAxis: 0,
        x: Date.UTC(2019, 11, 2),
        y: 3
      },
      zIndex:100,
      text: 'Arbois'
    }],
  }],
1
javascriptreactjshighcharts

1 Answers

1
votes

You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:

  plotOptions: {
    area: {
      label: {
        enabled: true,
        onArea: false
      }
    },
    line: {
      label: {
        enabled: false
      }
    }
  }

Note, annotations also work but you have to attach annotations module separately.

Demo:

API reference: