Export Highcharts polar chart csv with categories in place of polar coordinates

Question

I've implemented a polar chart in which each series has 4 values corresponding to 4 categories. When I export the chart csv, the category column contains polar coordinates. I would like to replace these with the corresponding category name. How do I do this?

Adding the categories to each series, had no effect. I also tried adding a categories property to the xAxis, but it had not effect. An xAxis.label formatter successfully returns the category name for each data polar coordinate.

const options = {
  chart: {
    polar: true,
  },
  title: {
    text: '',
  },
  tooltip: {
    valueDecimals: 2,
    headerFormat: '<br/>',
  },
  legend: {},
  pane: {
    startAngle: 0,
    endAngle: 360,
  },
  xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: {
      // eslint-disable-next-line
      formatter: function() {
        switch (this.value) {
          case 45:
            return '<b>Experience</b>'
          case 135:
            return '<b>Frictionless</b>'
          case 225:
            return '<b>Low Price</b>'
          case 315:
            return '<b>Brand</b>'
          default:
            return ''
        }
      },
    },
  },
  yAxis: {
    min: 0,
    max: 10,
    labels: {
      format: '{}',
    },
  },
  plotOptions: {
    series: {
      pointStart: 45,
      pointInterval: 90,
    },
    column: {
      pointPadding: 0,
      groupPadding: 0,
    },
  },
  series: kahnSeries,
}

Answer 1

You need to use categories property, but without options like: pointInterval, pointStart, min and max:

xAxis: {
    categories: ['Experience', 'Frictionless', 'Low Price', 'Brand']
},

Live demo: http://jsfiddle.net/BlackLabel/z8cm1p39/

API Reference: https://api.highcharts.com/highcharts/xAxis.categories

Answer 2

To avoid changing the chart's current display, I wrapped the getCSV function and replaced the CSV category values. If there was a simpler way, please share it.

{
  (function (H) {
    H.wrap(H.Chart.prototype, 'getCSV', function (
      proceed,
      useLocalDecimalPoint
    ) {
      // Run the original proceed method
      const result = proceed.apply(
        this,
        Array.prototype.slice.call(arguments, 1)
      )
      const itemDelimiter = ','
      const lineDelimiter = '\n'
      const rows = result.split(lineDelimiter)
      let newResult = ''
      let rowCategories = false
      rows.forEach((row, rowIndex) => {
          const columns = row.split(itemDelimiter)
          if (rowIndex === 0 && columns[0] === '"Category"') {
            rowCategories = true
          }
          if (rowIndex > 0 && rowCategories) {
            let newRow = formatter(columns[0])
            columns.forEach((column, columnIndex) => {
              if (columnIndex > 0) {
                newRow += itemDelimiter
                newRow += column
              }
            })
            newResult += newRow
          } else {
            newResult += row
          }
          if (rowIndex < rows.length - 1) {
            newResult += lineDelimiter
          }
        }
      )
      return newResult
    })
  }(Highcharts))
}