Pie Charts Display
const privProgConfig = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: 'Privacy Program Engagement',
    },
    tooltip: {
      pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br/>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [{
      data: [
        {
          name: 'Not Completed',
          y: 1 - (0.01 * privProgInt),
        },
        {
          name: 'Completed',
          y: (0.01 * privProgInt),
        }],
    }],
    colors: Theme.palette.completionColors,
  };

  const dataProConfig = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: 'Data Protection Measures',
    },
    tooltip: {
      pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br/>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [{
      data: [
        {
          name: 'Not Completed',
          y: 1 - (0.01 * dataProInt),
        },
        {
          name: 'Completed',
          y: (0.01 * dataProInt),
        }],
    }],
    colors: Theme.palette.completionColors,
  };

  const dataMinConfig = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: 'Data Minimization',
    },
    tooltip: {
      pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br/>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [{
      data: [
        {
          name: 'Not Completed',
          y: 1 - (0.01 * dataMinInt),
        },
        {
          name: 'Completed',
          y: (0.01 * dataMinInt),
        }],
    }],
    colors: Theme.palette.completionColors,
  };

  const transConfig = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: 'Transparency & Choice',
    },
    tooltip: {
      pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br/>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        borderWidth: 0,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [{
      data: [
        {
          name: 'Not Completed',
          y: 1 - (0.01 * transInt),
        },
        {
          name: 'Completed',
          y: (0.01 * transInt),
        }],
    }],
    colors: Theme.palette.completionColors,
  };

  const thirdPartyConfig = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: 'Update Third Party Vendor Inventory & Usage',
    },
    tooltip: {
      pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br/>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
        },
        showInLegend: true,
      },
    },
    series: [{
      data: [
        {
          name: 'Not Completed',
          y: 1 - (0.01 * thirdPartyInt),
        },
        {
          name: 'Completed',
          y: (0.01 * thirdPartyInt),
        }],
    }],
    colors: Theme.palette.completionColors,
  };

Large bar chart display
const config = {
  chart: {
    type: 'bar',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    zIndex: 0,
  },
  title: {
    text: 'Compliance Breakdown',
    align: 'center',
  },
  xAxis: {
    categories: ['Privacy Program Engagement', 'Data Protection Measures',
      'Data Minimization', 'Transparency & Choice', 'Update 3rd Party Vendors'],
    labels: {
      enabled: true,
    },
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: null,
    },
    min: 0,
    max: 100,
  },
  plotOptions: {
    series: {
      stacking: 'normal',
    },
  },
  tooltip: {
    shared: false,
    formatter() {
      return this.point.printout;
    },
  },
  series: [{
    name: 'Incomplete',
    data: [
      {
        y: 100 - privProgAvg,
        printout: privProgFailure.join('<br>'),
      },
      {
        y: 100 - dataProtAvg,
        printout: dataProtFailure.join('<br>'),
      },
      {
        y: 100 - dataMinAvg,
        printout: dataMinFailure.join('<br>'),
      },
      {
        y: 100 - transAvg,
        printout: transStr2,
      },
      {
        y: 100 - thirdPartyAvg,
        printout: thirdPartyStr2,
      },
    ],
    color: Theme.palette.completionColors[0],
  },
  {
    name: 'Complete',
    data: [
      {
        y: privProgAvg,
        printout: privProgSuccess.join('<br>'),
      },
      {
        y: dataProtAvg,
        printout: dataProtSuccess.join('<br>'),
      },
      {
        y: dataMinAvg,
        printout: dataMinSuccess.join('<br>'),
      },
      {
        y: transAvg,
        printout: transStr1,
      },
      {
        y: thirdPartyAvg,
        printout: thirdPartyStr1,
      },
    ],
    color: Theme.palette.completionColors[1],
  }],
};