Question 357704 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add text above the legend and align item in Highcharts

attached is the image and is my expected results. I’d like to add the text Vehicle and Percentage above the legend and also align them legend text and the number. How to do this using Highcharts?

Expected Result

Demo

Highcharts.chart("container", {
  colors: ["#01BAF2", "#71BF45", "#FAA74B", "#B37CD2"],
  chart: {
    type: "pie"
  },
  accessibility: {
    point: {
      valueSuffix: "%"
    }
  },
  title: {
    text: "February 2020 Norway passenger auto registrations"
  },
  subtitle: {
    text:
      'Source:<a href="https://cleantechnica.com/2020/03/07/pioneering-norway-rises-above-68-plug-in-vehicle-market-share-in-february/">cleantechnica</a>'
  },
  tooltip: {
    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>"
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: "pointer",
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name + ' ' + this.y;
        } 
      },
      showInLegend: true
    }
  },
  series: [
    {
      name: "Registrations",
      colorByPoint: true,
      innerSize: "75%",
      data: [
        {
          name: "EV",
          y: 68.1
        },
        {
          name: "Hybrids",
          y: 11.0
        },
        {
          name: "Diesel",
          y: 11.2
        },
        {
          name: "Petrol",
          y: 9.7
        }
      ]
    }
  ],
  legend: {
    align: "right",
    verticalAlign: "middle",
    enabled: true,
    itemWidth: 200,

    useHTML: true,
    labelFormatter: function () {
      return this.name + " " + Math.round(this.percentage * 100) / 100 + "%";
    }
  }
});

I’ve tried using labelFormatter annd legend text but nothing fits my need.

Tags:

2

Answers


  1. 0

    You can use title property within the legend.
    Try this:

    legend: {
align: "right",
verticalAlign: "middle",
enabled: true,
itemWidth: 200,
useHTML: true,
title: {
  text: 'Vehicle Percentage'
},
labelFormatter: function () {
  return this.name + " " + Math.round(this.percentage * 100) / 100 + "%";
}}
    Login or Signup to reply.
  2. 0

    Can’t say it’s the best way to do this but it works:

    title: {
  text: `<div style="display: flex";font-size: 10px><div style="width: 50px">Vehicle</div><div>Percentage</div></div>`
},
labelFormatter: function () {
  return `<div style="display: flex"><div style="width: 50px">${this.name}</div><div id="percent">${Math.round(this.percentage * 100) / 100}</div></div>`
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search