In AmCharts, can I add additional or custom dataFields to a pie chart?

Question

I am currently in the process of rewriting a legacy app that uses AngularJS and google-charts to now use Angular and AmCharts.

For our charts in the legacy application, the data that is used to render our charts is either 'Sales' OR 'Units'. But for the tooltips we like to show values for both 'Sales' AND 'Units'. This is a tooltip from one of our charts that is showing Sales for a particular product: Legacy chart tooltip

I was able to replicate this with a line chart, but have not been able to with a pie chart.

Code i used for the line chart with a tooltip showing 'Sales' and 'Units':

...
chart.data = this.data

function createDollarAxis(field, name, unit, opposite) {
  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.valueX = unit;
  series.dataFields.dateX = 'date';
  series.strokeWidth = 2;
  series.name = name;
  series.tensionX = 0.8;
  series.tooltipHTML = `
       <div style="text-align:center">
         <p style="border-bottom:1px solid; margin:0px 10px 10px">
           {date}
         </p>
         <strong>{name}</strong>
         </br>
         <p style="display:inline;margin:0">
           Units: {valueX}
         </p>
         <div style="display:inline-block;width:10px"></div>
         <p style="display:inline;margin:0">
           Sales: {valueY}
         </p>
       </div>
      `
   ...
}

createDollarAxis('name', 'dollars', 'units', false);

I can use the 'valueX' data field to get the units value to add to my tooltip even though the chart only visually shows the Sales data.

The pie chart doesn't seem to have any dataFields that I can use for this other than 'value' or 'category'. Currently for my pie chart I have something along the lines of:

let chart = am4core.create(this.chartid, am4charts.PieChart);
chart.data = this.data;

function createPieSlice(name: string, data: string, data2: string) {
  let pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = data;
  pieSeries.dataFields.category = name;
  ...

  pieSeries.slices.template.tooltipHTML = `
    <div style="text-align:left;margin:5px;">
      <strong style="color:white;">{category} - {value.percent.formatNumber('#.0')}</strong>
      <br/>
      <p style="display:inline;margin:0;color:white;">
        Gross Dollars: $ {value.value.formatNumber('###,###,###.00')}
      </p>
      <br/>
      <p style="display:inline;margin:0;color:white;">
        Gross Units: { <need 'units' data here> }
      </p>
    </div>
  `
 ...
}

// create slices with above function
createPieSlice('category', 'sales', 'units');

Is there a way to add an additional dataField (or another type) to a PieSeries? Any info would be greatly appreciated.

I am using AmCharts 4.7.17 and Angular 8.0.0.

Answer 1

It turned out to be just me overthinking and expecting it to be more complicated than it is. Here is the code that works:

      function createPieSlice(name: string, data:string) {
        // Create slices
        let pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = data;
        pieSeries.dataFields.category = name;

        pieSeries.ticks.template.disabled = true;
        pieSeries.alignLabels = false;

        // Add inner labels to pie slices
        pieSeries.labels.template.text = `{value.percent.formatNumber('#.0')}%`;
        pieSeries.labels.template.radius = am4core.percent(-25);
        pieSeries.labels.template.fill = am4core.color('white');

        // These functions are here so the inner labels don't show whenever the slice is less than 5 percent
        pieSeries.labels.template.adapter.add('radius', function(radius, target) {
          if (target.dataItem && (target.dataItem.values.value.percent < 5)) {
            target.dataItem.label.text = '';
            return 0;
          }
          return radius;
        });

        pieSeries.labels.template.adapter.add('fill', function(color, target) {
          if (target.dataItem && (target.dataItem.values.value.percent < 5)) {
            return am4core.color('white');
          }
          return color;
        });

        // Custom Tooltip styling
        pieSeries.slices.template.tooltipHTML = `
            <div style="text-align:left;margin:5px;">
              <strong style="color:white;">{category} - {value.percent.formatNumber('#.0')}% </strong>
              <br/>
              <p style="display:inline;margin:0;color:white;">
                Gross Dollars: $ {value.value.formatNumber('###,###,###.00')}
              </p>
              <br/>
              <p style="display:inline;margin:0;color:white;">
                Gross Units: {units} //You just need to add the key. Doh!
              </p>
            </div>
          `
        pieSeries.tooltip.getFillFromObject = false;
        pieSeries.tooltip.background.fill = am4core.color('black');
        pieSeries.tooltip.pointerOrientation = 'vertical';

        // Adds a border around each slice
        pieSeries.slices.template.stroke = am4core.color('#fff')
        pieSeries.slices.template.strokeWidth = 0.5;
        pieSeries.slices.template.strokeOpacity = 1;
        pieSeries.slices.template
          .cursorOverStyle = [

            {
              'property': 'cursor',
              'value': 'pointer'
            }
          ];

        // Center label with total
        let label = pieSeries.createChild(am4core.Label);
        label.text = `$[BOLD]{values.value.sum.formatNumber('###,###,###.00')}`;
        label.horizontalCenter = 'middle';
        label.verticalCenter = 'middle';
        label.fontSize = 15;
      }


      createPieSlice('retailer', 'sales');
...

So all you need to do for tooltips is add the key of whatever data value you're trying to show, so since my data looked like { retailer: 'blah', sales: 999, units: 999 } all you need to do is add '{units}' inside a label/tooltip.