HighCharts remove $ and % symbols from custom html table when creating graph

Question

I have created a custom HTML table that I want to render into a bar graph using highcharts. But I would like to show the $ or % symbol to make it clear what the numbers in the chart mean, so each table cell would look like this: $23 or 45%. But when the highcharts graph tries to render I get this error: https://assets.highcharts.com/errors/14/ - String value sent to series.data, expected Number. How can I remove the $ and % symbols so that the chart still renderes even with the symbols?

Here is my current highcharts code:

onSetUpHighcharts() {
    Highcharts.chart('container', {
      data: {
        table: 'datatable',
        endColumn: this.currentReport.columns.length,
        endRow: this.currentReport.rows.length - 1
      },
      exporting: {
        enabled: false,
        buttons: {
          contextButton: {
            menuItems: ["printChart",
              "separator",
              "downloadPNG",
              "downloadJPEG",
              "downloadPDF",
              // "downloadSVG",
              "separator",
              "downloadCSV",
              "downloadXLS",
              //"viewData",
              "openInCloud"]
          }
        }
      },
      chart: {
        type: 'column'
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      credits: {
        enabled: false
      },
      accessibility: {
        announceNewData: {
          enabled: true
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table><br>',
        pointFormat: '<tr><td style="color: {series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
        footerFormat: '</table>'
      },
      title: {
        text: `${this.selectedYear} Total ${this.selectedItemTitle} Per ${this.selectedCategoryTitle} Per ${this.yearsSelected.length > 1 ? 'Year' : 'Month'} In ${this.selectedTypeTitle}`
      },
      subtitle: {
        text: 'To highlight a specific unit, hover over its name below. To remove a unit from the chart, click on its name below.'
      }
    });
  }

Any help is appreciated!

When attempting to use the parsed function I get the following Highcharts error:

 data: {
   table: 'datatable',
   endColumn: this.currentReport.columns.length,
   endRow: this.currentReport.rows.length - 1,
   parsed: function (columns) {
       columns[1] = columns[1].map(el => +el.replace('%', ''));
       columns[2] = columns[2].map(el => +el.replace('$', ''));
     }
    },

No overload matches this call.
Overload 1 of 2, '(options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
    Type '"container"' has no properties in common with type 'Options'.
    Overload 2 of 2, '(renderTo: string | HTMLElement, options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
    Type '(columns: any[][]) => void' is not assignable to type 'DataParsedCallbackFunction'.
    Type 'void' is not assignable to type 'boolean'.ts(2769)
    highcharts.d.ts(8955, 5): The expected type comes from property 'parsed' which is declared here on type 'DataOptions'

Answer 1

You can use parsed callback function to access data from a table and convert them to a number.

For example:

  data: {
    table: 'datatable',
    parsed: function(columns) {
      columns[1] = columns[1].map(el => +el.replace('%', ''));
      columns[2] = columns[2].map(el => +el.replace('$', ''));
    }
  }

---

Live demo: https://jsfiddle.net/BlackLabel/z54avmwh/

API Reference: https://api.highcharts.com/highcharts/data.parsed