javascript - Highcharts : Display the labels (min, max, median etc.) in boxplot - Stack Overflow

admin管理员组

文章数量:1130349

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

Share Improve this question Follow edited May 27, 2013 at 5:46 Mathijs Flietstra 13k33 gold badges4141 silver badges7171 bronze badges asked May 27, 2013 at 5:32 Vivek ViswanathanVivek Viswanathan 1,9631818 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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./

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

Share Improve this question Follow edited May 27, 2013 at 5:46 Mathijs Flietstra 13k33 gold badges4141 silver badges7171 bronze badges asked May 27, 2013 at 5:32 Vivek ViswanathanVivek Viswanathan 1,9631818 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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./

本文标签： javascriptHighchartsDisplay the labels (minMAXmedian etc) in boxplotStack Overflow