Adding a string to highcharts tooltip based on a separate data series

Question

I am trying to create a bar chart in highcharts using data from a django database back-end

the bar chart is plotting fine however, I need to show the ‘contact_note’ string in addition to the y-values upon hovering in the tooltip

The data from the database is being served in the following json format

{
  "chart_data": {
    "dates": [
      "12/12/16",
      "01/28/17",
      "02/10/17",
    ],
    "values": [
      9.0,
      47.0,
      13.0,
    ],
    "contact_notes": [
      "aa",
      "bb",
      "cc"
    ]
  }
}

the dates represent the x-axis, the 'values' are the y-axis and I would like the tooltip to include the contents of the 'contact_note' field

Here’s my highcharts code:

<script>

$(document).ready(function() {

     var options = {
        chart: {
            renderTo: 'chart_panel',
            type: 'column',
        },
        legend: {enabled: false},
        title: {text: 'Days Between Meetings'},
        tooltip: {
        formatter: function () {
            return "<span style='color:" + this.point.color + "'>\u25CF</span> " + this.series.name + " : <b>" + this.point.y + "</b> " +  contact_notes[this.point.index] + "<br/>";
        }},
        xAxis: {title: {text: null}, labels: {rotation: -45}},
        yAxis: {title: {text: null},
        plotLines: [{
                value: 20,
                color: 'orange',
                dashStyle: 'shortdash',
                width: 1.5}]
        },
        plotOptions: {column: {dataLabels: {enabled: true}}},
        series: [{}],
    };


    var chartDataUrl = "{% url 'chart_data' pk %}"

    $.getJSON(chartDataUrl,
        function(data) {
            options.xAxis.categories = data['chart_data']['dates'];
            options.series[0].name = 'Days between contacts';
            options.series[0].data = data['chart_data']['values'];

            var contact_notes = data['chart_data']['contact_notes'];

            var chart = new Highcharts.Chart(options);
    });

} );

</script>

Is there a simple way for me to append the contact notes to the series tooltip?

Thanks so much

Barbara Laird Barbara Laird · Accepted Answer · 2017-11-16T01:00:20

Sure, save the data from the backend somewhere (I just left it in your returned data object) and use the tooltip formatter function. The point is passed into the formatter and it has an index that you can use to index into your array.

http://jsfiddle.net/yjL551vp/

  tooltip: {
        formatter: function () {
            return "<span style='color:" + this.point.color + "'>\u25CF</span> " + this.series.name + " : <b>" + this.point.y + "</b> " +  data.chart_data.contact_notes[this.point.index] + "<br/>";
        }
    },

EDIT: Your current problem is that contact_notes is defined within your getJSON function, so it's out of scope in the formatter function. Define the var outside the getJSON function

   var chartDataUrl = "{% url 'chart_data' pk %}"
   var contact_notes = [];
    $.getJSON(chartDataUrl,
        function(data) {
            options.xAxis.categories = data['chart_data']['dates'];
            options.series[0].name = 'Days between contacts';
            options.series[0].data = data['chart_data']['values'];

            contact_notes = data['chart_data']['contact_notes'];

            var chart = new Highcharts.Chart(options);
    });

Adding a string to highcharts tooltip based on a separate data series

1 Answers