0

I'd like to show datasets on the bottom of charts but the only 'series 1' is displayed that I don't want.

How can I display the datasets of 'VIOO: 16.7%', 'MRNA: 9.9%', 'VO: 9.4%', etc on the bottom of the chart?

const highChartDataset =
    this.portfolioModel.map((x) => {
       return {
         name: x.symbol,
         value: toNumber((x.asset * 100 / sumAsset).toFixed(1)),
        }
      })

    this.highChartOptions = {
      chart: {
        type: 'treemap',
        backgroundColor: '#121212'
      },
      title: { text: '' },
      legend: {
        enabled: true,
        layout: 'vertical',
      },
      series: [{
        data: highChartDataset,
        type: "treemap",
        layoutAlgorithm: 'squarified',
        alternateStartingDirection: true,
        showInLegend: true,
        dataLabels: {
          enabled: true,
          style: {
            color: '#ffffff',
          },
          format: '{point.name}: {point.value}%'
        }
      }]
    }

screenshot

Ellen Mina Kim
  • 61
  • 1
  • 6
  • This is a Highcharts JS problem, not Angular, so could you reproduce your simplified, working code and data in an online editor such as JSFiddle, so that I can also test it? Here you can find a basic template that works well: https://jsfiddle.net/BlackLabel/p790j4wL/ – madepiet May 17 '21 at 08:45
  • Hi, madepiet. Thank you. My questions is how to display the legend on the bottom like this (SPY: 21.3%, VOO: 18.3%, etc instead of 'series 1'): https://stackblitz.com/edit/js-vayjbq?file=index.js – Ellen Mina Kim May 17 '21 at 23:21
  • I still don't quite know what the problem is here. You just need to format your data properly. Maybe this topic will be helpful? https://www.highcharts.com/forum/viewtopic.php?t=44282 – madepiet May 18 '21 at 07:52
  • name + value... I want to display name + value....but your example only displays 'name' on the legend. Is it possible to display name + value? – Ellen Mina Kim May 18 '21 at 11:00
  • Of course, you can do this using the options from the API: https://api.highcharts.com/highcharts/legend.labelFormatter https://jsfiddle.net/BlackLabel/k46tvqxs/ – madepiet May 18 '21 at 13:06
  • @madepiet Thank you for your support. You mean I cannot change the legend on the treemap with 'labelFormatter'. Could you please check it out? https://stackblitz.com/edit/js-vayjbq?file=index.js – Ellen Mina Kim May 22 '21 at 01:42
  • Check out this demo: https://jsfiddle.net/BlackLabel/gfjmue4r/ – madepiet May 24 '21 at 12:37

0 Answers0