Search code examples
javascriptchartshighchartsrangeaxis-labels

Is possible add minHeight or make column fit with text inside columnrange on Highcharts?


I have 3 values on each column (min, medium, max), I need position each box on correct position by value, and if 2 box or 3 box have same value or values very close, I need group (like last box of image), and the boxes need to have minHeight or something like this to fit the text inside:

enter image description here

I have some code here: http://jsfiddle.net/to2z4dyv/

New fiddle update: http://jsfiddle.net/vdgphk3L/

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange',
      inverted: false
    },

    plotOptions: {
      columnrange: {
        grouping: false,
        pointPadding: -0.20
      }
    },


    legend: {
      enabled: true
    },

    series: [{
      name: 'Minimo',
      color: 'green',
      data: [
        [10, 2000, 2999],
        [20, 5000, 6000],
        [30, 3000, 4000],
        [40, 8000, 9000],
        [50, 3500, 4000]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }, {
      name: 'Medio',
      color: 'yellow',
      data: [
        [10, 3000, 3999],
        [20, 6001, 7000],
        [30, 4001, 5000],
        [40, 9001, 9500],
        [50, 4001, 4500]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }, {
      name: 'Maximo',
      color: 'blue',
      data: [
        [10, 4000, 5000],
        [20, 7001, 8000],
        [30, 5001, 6000],
        [40, 9501, 10000],
        [50, 4501, 5000]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }]

  });

});

On this example, the [data] have 3 properties, I believe that I need to have only 2, one for the value and the other for the X axis...


Solution

  • I archieve this result http://jsfiddle.net/mv9vsmnn/, it was not exactly what I needed, but it solved my problem.

    $(function() {
    
      $('#container').highcharts({
    
        chart: {
          type: 'columnrange',
          inverted: false,
        },
    
        xAxis: {
          categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
          alternateGridColor: '#F6F9FC',
        },
    
        tooltip: {
          shared: true,
          width: 20,
          formatter: function() {
            var retorno = '<strong>Prices</strong>';
    
            $.each(this.points, function(i, point) {
              if (point.series.name == 'Min' || point.series.name == 'Med' || point.series.name == 'Max') {
                retorno += '<br /><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + numberToReal(point.y);
              }
            });
    
            return retorno;
          }
        },
    
        plotOptions: {
          columnrange: {
            grouping: false,
            pointWidth: 70,
            minPointLength: 25,
            dataLabels: {
              inside: true,
              enabled: true,
              allowOverlap: true,
              formatter: function() {
                if (this.y == this.point.low) {
                    return this.point.low;
                  }
              }
            }
          },
          series: {
            lineWidth: 0.5
          }
        },
    
        series: [
    
          // Min
          {
            name: 'Min',
            color: '#C30000',
            data: [
              [2000, 2001],
              [5000, 5001],
              [1000, 1001],
              [8000, 8001],
              [3500, 3501]
            ],
            dataLabels: {
              align: 'right',
            }
          }, {
            name: 'Min (Line)',
            color: '#C30000',
            type: 'spline',
            dashStyle: 'shortdot',
            data: [
              [2000],
              [5000],
              [1000],
              [8000],
              [3500]
            ]
          },
    
          // Med
          {
            name: 'Med',
            color: '#215994',
            data: [
              [3000, 3001],
              [6001, 6002],
              [3001, 3002],
              [9001, 9002],
              [4001, 4160]
            ],
            dataLabels: {
              align: 'center',
            }
          }, {
            name: 'Med (Line)',
            color: '#215994',
            type: 'spline',
            dashStyle: 'shortdot',
            data: [
              [3000],
              [6001],
              [3001],
              [9001],
              [4001]
            ]
          },
    
          // Max
          {
            name: 'Max',
            color: '#ECEC09',
            data: [
              [4000, 4001],
              [7001, 7002],
              [5001, 5002],
              [9501, 9502],
              [4501, 4502]
            ],
            dataLabels: {
              align: 'left',
            }
          }, {
            name: 'Max (Line)',
            color: '#ECEC09',
            type: 'spline',
            dashStyle: 'shortdot',
            data: [
              [4000],
              [7001],
              [5001],
              [9501],
              [4501]
            ]
          }
    
        ]
    
      });
    
    });