Customize exported csv headers from heatmap chart

Question

Code: https://jsfiddle.net/b8nkhsg0/

Highcharts.chart('container', {
    "chart": {
        "height": "50%",
        "marginRight": 200,
        "marginLeft": 200
    },
    "tooltip": {},
    "colorAxis": {
        "min": 0,
        "max": 50,
        "endOnTick": false,
        "minColor": "#ffffff",
        "maxColor": "#00CF64",
        "reversed": true
    },
    "legend": {
        "symbolWidth": 500
    },
    "series": [
        {
                name: "count",
            "type": "treemap",
            "borderColor": "#fff",
            "borderRadius": 1,
            "borderWidth": 1,
            "colorKey": "value",
            "layoutAlgorithm": "squarified",
            "clip": false,
            "dataLabels": {
                "style": {
                    "textOutline": "none"
                }
            },
            "data": [
                {
                    "article_name": "Help",
                    "category": "",
                    "language_utterance_map": {
                        "en": 5
                    },
                    "total_utterances": 5,
                    "name": "Help",
                    "value": 5,
                    "languageData": "<b>en:</b> 5"
                },
                {
                    "article_name": "Default fallback intent",
                    "category": "",
                    "language_utterance_map": {
                        "en": 0
                    },
                    "total_utterances": 0,
                    "name": "Default fallback intent",
                    "value": 0,
                    "languageData": "<b>en:</b> 0"
                },
                {
                    "article_name": "Goodbye",
                    "category": "",
                    "language_utterance_map": {
                        "en": 15
                    },
                    "total_utterances": 15,
                    "name": "Goodbye",
                    "value": 15,
                    "languageData": "<b>en:</b> 15"
                },
                {
                    "article_name": "Greetings",
                    "category": "",
                    "language_utterance_map": {
                        "en": 24
                    },
                    "total_utterances": 24,
                    "name": "Greetings",
                    "value": 24,
                    "languageData": "<b>en:</b> 24"
                },
                {
                    "article_name": "Not helpful",
                    "category": "",
                    "language_utterance_map": {
                        "en": 28
                    },
                    "total_utterances": 28,
                    "name": "Not helpful",
                    "value": 28,
                    "languageData": "<b>en:</b> 28"
                },
                {
                    "article_name": "Thank you",
                    "category": "",
                    "language_utterance_map": {
                        "en": 11
                    },
                    "total_utterances": 11,
                    "name": "Thank you",
                    "value": 11,
                    "languageData": "<b>en:</b> 11"
                },
                {
                    "article_name": "Talk to an agent",
                    "category": "",
                    "language_utterance_map": {
                        "en": 6
                    },
                    "total_utterances": 6,
                    "name": "Talk to an agent",
                    "value": 6,
                    "languageData": "<b>en:</b> 6"
                },
                {
                    "article_name": "Flight booking",
                    "category": "",
                    "language_utterance_map": {
                        "en": 4
                    },
                    "total_utterances": 4,
                    "name": "Flight booking",
                    "value": 4,
                    "languageData": "<b>en:</b> 4"
                },
                {
                    "article_name": "Interest rate",
                    "category": "",
                    "language_utterance_map": {
                        "en": 4
                    },
                    "total_utterances": 4,
                    "name": "Interest rate",
                    "value": 4,
                    "languageData": "<b>en:</b> 4"
                },
                {
                    "article_name": "Home loan",
                    "category": "",
                    "language_utterance_map": {
                        "en": 8
                    },
                    "total_utterances": 8,
                    "name": "Home loan",
                    "value": 8,
                    "languageData": "<b>en:</b> 8"
                },
                {
                    "article_name": "movie ticket booking",
                    "category": "",
                    "language_utterance_map": {
                        "en": 4
                    },
                    "total_utterances": 4,
                    "name": "movie ticket booking",
                    "value": 4,
                    "languageData": "<b>en:</b> 4"
                }
            ]
        }
    ],
    "title": {
        "text": "Utterances per intent"
    }
});

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Tree maps are great tools for comparing values that are part
        of a whole, or for showing hierarchical data. This example
        is a simple tree map with no hierarchy, showing the value
        differences with rectangle sizes and using a color axis.
    </p>
</figure>

In above heatmap I am trying to customize csv header to "Intent name" and "count". But I am currently getting it as "Category" and "count".

I have tried to google but couldnt find anything on heatmap.

I am not sure where "Category" is coming from and how to change it. Please advice.

Thank you

Answer 1

You can use the columnHeaderFormatter function:

  exporting: {
    csv: {
      columnHeaderFormatter: function(item) {
        // check if item is an axis
        if (item.tickPositions) {
          return 'Intent name'
        }
        return false;
      }
    }
  }

---

Live demo: https://jsfiddle.net/BlackLabel/1mwyguao/

API Reference: https://api.highcharts.com/highcharts/exporting.csv.columnHeaderFormatter