HighChart Stacked column bar

Question

Stacked column chart with Highcharts. How could I implement something like this?

I am using 4 additional plotLines with different values on the left side and on the right side, but the problem is how can I hide value of Q1 and Q2 on y-axis and only display plotLines?

Code

Highcharts.chart('container', {

  chart: {
    type: "column",
    margin: [100, 120, 30, 100],
    height: 440,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent"
  },
  title: {
    text: "",
    align: "center",
    x: -140,
    y: 12,
    floating: true,
    style: {
      fontSize: "23px",
      fontWeight: "300"
    }
  },
  xAxis: {
    categories: ['Q1 2018', 'Q4 2017'],
    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0
  },
  yAxis: {

    title: {
      text: "Bonus Criteria",
      x: -45,
      opposite: true,
    },
    title: {
      text: ''
    },

    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0,
    tickPosition: "outside",
    labels: {
      align: "left",
      x: -30,
      y: 0
    },
    lineWidth: 1,
    plotLines: [


      {

        color: "black",
        // Average here
        value: 120,
        width: "2",
        label: {
          text: '0',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 2nd criteria for bonus
      {
        color: "green",
        // Average here
        value: 180,
        width: "2",
        label: {
          text: '10,000',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 3rd criteria for bonus
      {
        color: "green",
        // Average here
        value: 240,
        width: "2",
        label: {
          text: '20,000 ',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      },

      // 4th criteria for bonus
      {
        color: "yellow",
        value: 300,
        width: "2",
        label: {
          text: '30,000',
          align: "right",
          fontWeight: "bold",
          fontSize: "16",
          x: 100,
          y: 5
        },

        zIndex: 2
      }
    ]
  },

  plotOptions: {
    legend: {
      enable: false
    },
    series: {
      stacking: 'normal'
    },
    column: {
      colorByPoint: true
    }
  },
  colors: [
    '#05a0f0',
    '#aaddfa',
  ],
  series: [{
    data: [29.9, 71.5]
  }, {
    data: [144.0, 176.0]
  }, {
    data: [70, 60]
  }],
  dataLabels: {
    enabled: true
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
  },

});

Here's an inline link to jsfiddle.

To hide the yAxis lables you can use: yAxis: {labels: {enabled: false},...}. Is this what you are after: jsfiddle.net/ch17r8df/14 ? — ewolden
thanks! almost there. How i can display another plot value on the left side instead of yAxis labels then? for example : 0 - 0%; 10,000 - 5% ? — dar3l

ewolden ewolden · Accepted Answer · 2018-03-20T14:33:53

Turning of the yAxis labels by using:

yAxis: {
  lables: {
    enabled: false
  },
  ...
}

Then setting plotLines to the left side like:

yAxis: {
  plotLines: {
    color: "black",
    value: 120,
    width: "2",
    label: {
      text: '0%', //Visible text
      align: "left",  //left axis
      fontWeight: "bold",
      fontSize: "16",
      x: -30, // xAxis offset
      y: 5
    },
    zIndex: 2
  }
...
}

In addition I disabled the legend:

legend: {
  enabled: false
}

Which will get you something very similar to what you are after.

Highcharts.chart('container', {

  chart: {
    type: "column",
    margin: [100, 120, 30, 100],
    height: 440,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "transparent"
  },
  title: {
    text: "",
    align: "center",
    x: -140,
    y: 12,
    floating: true,
    style: {
      fontSize: "23px",
      fontWeight: "300"
    }
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: ['Q1 2018', 'Q4 2017'],
    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0
  },
  yAxis: {

    title: {
      text: "Bonus Criteria",
      x: -45,
      opposite: true,
    },
    title: {
      text: ''
    },

    tickWidth: 0,
    gridLineWidth: 0,
    tickLength: 0,
    tickWidth: 0,
    tickPosition: "outside",
    labels: {
    enabled: false,
      align: "left",
      x: -30,
      y: 0
    },
    lineWidth: 1,
    plotLines: [{
        color: "black",
        // Average here
        value: 120,
        width: "2",
        label: {
          text: '0%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },
        zIndex: 2
      },

      // 2nd criteria for bonus
      {
        color: "green",
        // Average here
        value: 180,
        width: "2",
        label: {
          text: '5%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },

      // 3rd criteria for bonus
      {
        color: "green",
        // Average here
        value: 240,
        width: "2",
        label: {
          text: '10%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },

      // 4th criteria for bonus
      {
        color: "yellow",
        value: 300,
        width: "2",
        label: {
          text: '15%',
          align: "left",
          fontWeight: "bold",
          fontSize: "16",
          x: -30,
          y: 5
        },

        zIndex: 2
      },{

    color: "black",
    // Average here
    value: 120,
    width: "2",
    label: {
      text: '0',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 2nd criteria for bonus
  {
    color: "green",
    // Average here
    value: 180,
    width: "2",
    label: {
      text: '10,000',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 3rd criteria for bonus
  {
    color: "green",
    // Average here
    value: 240,
    width: "2",
    label: {
      text: '20,000 ',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  },

  // 4th criteria for bonus
  {
    color: "yellow",
    value: 300,
    width: "2",
    label: {
      text: '30,000',
      align: "right",
      fontWeight: "bold",
      fontSize: "16",
      x: 100,
      y: 5
    },

    zIndex: 2
  }
    ]
  },

  plotOptions: {
    legend: {
      enable: false
    },
    series: {
      stacking: 'normal'
    },
    column: {
      colorByPoint: true
    }
  },
  colors: [
    '#05a0f0',
    '#aaddfa',
  ],
  series: [{
    data: [29.9, 71.5]
  }, {
    data: [144.0, 176.0]
  }, {
    data: [70, 60]
  }],
  dataLabels: {
    enabled: true
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
  },

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Working example: https://jsfiddle.net/ch17r8df/20/

HighChart Stacked column bar

1 Answers