Highcharts: add different colors to legend in one series histogram

Question

I have sample code for question here: http://jsfiddle.net/pzamora/ztxPr/1/

I have different colors in my series, however I need them to appear in the legend

series: [{ name: 'V Genes',
        data: 
        [
            { 
                count: 18320.0, 
                y: 0.92, 
                color: '#3D96AE' 
            }, 
            { 
                count: 1337.0, 
                y: 0.17, 
                color: '#3D96AE' 
            }, 
            { 
                count: 33970.0, 
                y: 1.71, 
                color: '#4572A7' 
            }, 
            { 
                count: 1221.0, 
                y: 1.06, 
                color: '#3D96AE' 
            }, 
            { 
                count: 22073.0, 
                y: 1.11, 
                color: '#4572A7' 
            }, 
            { 
                count: 8331.0, 
                y: 0.42, 
                color: '#3D96AE' 
            }, 
            { 
                count: 64974.0, 
                y: 3.27, 
                color: '#4572A7' 
            },
            { 
                count: 9532.0, 
                y: 0.48, 
                color: '#3D96AE' 
            }, 
            { 
                count: 18106.0, 
                y: 0.91, 
                color: '#4572A7' 
            }
        ]
    }]

..I matched x values with the category position but I am not getting all my data displayed on the chart

@jsfiddle: http://jsfiddle.net/pzamora/phrP7/4/

Answer 1

You could do the following:

1. Split data into two series
2. Add color for the legend in each series

3. Add x parameter to each value so they don't overlap

    series: [{ name: 'X Genes', color: '#3D96AE', data: [ { count: 18320.0, y: 0.92, color: '#3D96AE', x: 0 }, { count: 1337.0, y: 0.17, color: '#3D96AE', x: 1 }, { count: 1221.0, y: 1.06, color: '#3D96AE', x: 3 }, { count: 8331.0, y: 0.42, color: '#3D96AE', x: 5 }, { count: 9532.0, y: 0.48, color: '#3D96AE', x: 7 } ] }, { name: 'V Genes', color: '#4572A7', data: [ { count: 33970.0, y: 1.71, color: '#4572A7', x: 2 }, { count: 22073.0, y: 1.11, color: '#4572A7', x: 4 }, { count: 64974.0, y: 3.27, color: '#4572A7', x: 6 }, { count: 18106.0, y: 0.91, color: '#4572A7', x: 8 } ] }] 

4. Add stacking: 'normal to the plotOptions so that the values are in the middle of each column.

    plotOptions: { column: { cursor: 'pointer', stacking: 'normal' } }, 

Answer 2

For each legend element you have to create a serie.
So if you want two elements you have to create 2 series.
Then you have to set the x value for each point, to make the column stack on the categorie.

demo

So, if I have the following categorie:

['first', 'second', 'third']

My series have to have the following data:
serie1: [{count: 400, y: 10, x: 1}]
serie2: [{count: 300, y: 5, x: 0}, {count: 500, y: 15, x: 2}]

This case serie 1 appears on second and serie 2 on first and third .

demo

Reference

• Serie data

Update :

Updated because she's an issue with the categories. It happens because the x value have to be an integer and not a string .

{
    y: 40,
    x: 2,
    count: 300
}

demo

Answer 3

series: [{ name: 'X Genes', color: '#3D96AE',
        data:
        [
            {
                count: 18320.0,
                y: 0.92,
                x: 0
            },
            {
                count: 1337.0,
                y: 0.17,
                x: 1
            },
            {
                count: 1221.0,
                y: 1.06,
                x: 3
            },
            {
                count: 8331.0,
                y: 0.42,
                x: 5
            },
            {
                count: 9532.0,
                y: 0.48,
                x: 7
            }
        ]
    },
    { name: 'V Genes', color: '#4572A7',
        data:
        [
            {
                count: 33970.0,
                y: 1.71,
                x: 2
            },
            {
                count: 22073.0,
                y: 1.11,
                x: 4
            },
            {
                count: 64974.0,
                y: 3.27,
                x: 6
            },
            {
                count: 18106.0,
                y: 0.91,
                x: 8
            }
        ]
    }]

You do not need to specify color attribute for each point if you specify it for series.

JsFiddle Demo

Answer 4

A series in the legend can only have one color while each point in a series can over-ride this color (as you have done in your code). If you want more data in your legend you could break up your single series into multiple with the codes you want. It is not entire clear what your expected outcome is for this question.