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

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