Highcharts - Column chart customization

Question

I am creating column chart using Highcharts library. I am trying to custom Column chart according my requirement but two things I am unable to do. First, bottom border of the column chart and second is column background for all the series. Look at the image below, what I need to achieve.

What I have done so far is here: jsfiddle

jQuery(document).ready(function(jQuery) {

          jQuery('#portlet-content').highcharts({
        credits: {
            enabled: false
        },
        exporting: {
          enabled: false
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Number of Applications'
        },
        subtitle: {
            text: 'BY COUNTRY'
        },
        xAxis: {
          visible: false
        },
        yAxis: {
            visible: false
        },
        legend: {
            enabled: true,
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            padding: 3,
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemStyle: {
                lineHeight: '14px'
            },
            symbolHeight: 12,
            symbolWidth: 12,
            symbolRadius: 6
        },
        tooltip: {
            formatter: function() {
                                return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
                            },
            useHTML: true,
            borderWidth: 0,
            style: {
                padding: 0,
                fontSize: '16px'
            },
            shadow: false
        },
        series: [
            {
              name: "United Kingdom",
              color: '#32323A',
              data: [
                  [294]
              ]
            }, {
              name: "USA",
              color: '#EB4825',
              data: [
                  [65]
              ]
            }
            , {
              name: "United Arab Emirates",
              color: '#F7CC1E',
              data: [
                  [35]
              ]
            }
            , {
              name: "India",
              color: '#24C746',
              data: [
                  [23]
              ]
            }
            , {
              name: "Canada",
              color: '#2587EC',
              data: [
                  [18]
              ]
            }
        ]
      });

    });

Is this what you are looking, http://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart for customising column background for all the series — Jayaraj.K, May 02 '16 at 05:29
Heya. Would you be able to pop the code into the question inline so people can see it at a glace? :~) — Peter David Carter, May 02 '16 at 05:31
@Jayaraj.K No, I am looking for column light background to the some max point for all columns and show different color for all column to the passed data point as I shown in the image. — Hardiksinh Gohil, May 02 '16 at 06:29

Mike Zavarello · Answer 1 · 2016-05-03T11:12:14.320

2

Note: I have modified my answer to better address the specific requests in the original poster's question.

Here's what I would suggest:

Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.

Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/

plotOptions: {
    column: { stacking: 'percent' }
},
series: [
    /* this is the "dummy" series
       set the "showInLegend" and "enableMouseTracking" attributes 
       to "false" to prevent user interaction */
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
              showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each
       set nulls for the columns where that color/data is not needed */
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]

Please let me know if this is helpful for you!

edited May 03 '16 at 11:12

answered May 02 '16 at 13:37

Mike Zavarello

3,514
4
29
43

I tried lot but unable to do exact as my requirement. Following your example I am able to show columns as expected but that way I am unable to show Labels in legend. – Hardiksinh Gohil May 03 '16 at 09:22
I see that I missed some key parts of your question, so I've updated my answer and the associated fiddle above. Please let me know if this is a better response for you. – Mike Zavarello May 03 '16 at 11:12
Thanks, it really helped me lot. I am now able to show the columns as expected with series labels on right. I did some changes to show as per my requirement. Check here (http://jsfiddle.net/t1rLr1or/3/). The only issue is now with the tooltip as I want to show it on top of the stack but it shows at point top. – Hardiksinh Gohil May 03 '16 at 14:02
Actually I tried with css to show tooltip at fixed position from top (http://jsfiddle.net/t1rLr1or/4/) but problem is I am generating dynamic graphs so sometime it overlaps by column. The another issue is I can't pop-up tool-tip on top while hover on background series. – Hardiksinh Gohil May 03 '16 at 14:09
I run your demo and tooltip is not displayed for gray columns (backgrounds). Only what I observed is that "white shape" is printed above color columns. – Sebastian Bochan May 04 '16 at 12:11
@Hardiksinh Gohil You're not going to get the tooltip over the dummy series because that's the expected behavior. I hadn't anticipated that. I'll see if I can work up another alternative for you over the next day or so. – Mike Zavarello May 04 '16 at 14:03

Highcharts - Column chart customization

1 Answers1