I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.

I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?

Thanks.

I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.

I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?

Thanks.

• javascript
• highcharts

3 Answers 3

Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:

{
  series: [
    {
      type: 'scatter',
      tooltip: {
        enabled: false
      },
      dataLabels: {
        format: '{key}',
        enabled: true,
        y: 0,
      },
      data: [{ x: 0, y: 975, name: '975'}],
      marker: {
        enabled: false,
      }
    }
  ]
}

just disable marker and set format to key.

Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.

{
        name: 'Outlier',
        color: 'white',
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            {
                name: 'This is my label for the box',
                x:0,   //box index.  first one is 0.
                y:975 //it will be bigger than the maximum value of of the box
            }
        ],
        dataLabels : {
            align: 'left',
                enabled : true,
                formatter : function() {
                    return this.point.name;
                },
            y: 10,
            },
        marker: {
            fillColor: 'white',
            lineWidth: 0,
            lineColor: 'white'
        }
    }

Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not fortable solution. http://api.highcharts./highcharts#Renderer.text()

Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice./