Set chart colours based on row values

  • 1
  • Idea
  • Updated 5 months ago
I've seen some use a snippet to set the colour index after setting the colours in the chart. I'd like to set the colours dynamically based on colour values stored on the record. Anybody done this so far?

Embarking on it right now. I'll post here if I find a solution.

Starting here. https://api.highcharts.com/highcharts/series.column.colors
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,774 Points 20k badge 2x thumb

Posted 5 months ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,774 Points 20k badge 2x thumb
Figured it out. :D



function setChartSplitColours (chartObj,color_model,color_index,color_field){
    var chartcolors = [],
        colorIndex = [],
        ind,
        series = chartObj.series;
    
    $.each(color_model.getRows(), function(r,row){
        
        index = row[color_index].replace(/[\n\r]+/g, '');
        
        if (typeof row[color_field] !== 'undefined'){
            chartcolors.push('#' + row[color_field]);
            colorIndex.push({index: index,color: row[color_field]});
        } else {
            chartcolors.push('#000000');
            colorIndex.push({index: index,color: '000000'});
        }
    });
    
    $.extend(true,chartObj,{
        colors: chartcolors
    });
    
    $.each(series, function (i, s_point){	

        $.each(colorIndex, function (c,cIndex){
            if(s_point.id.replace(/[\n\r]+/g, '') == cIndex.index){
                ind = c;
                return false;
            }
        });
        
        // update series index number and color index with ind variable. 
        $.extend(true, series[i],{
            index: ind,
            _colorIndex: ind
        },
        {
            index: ind,
            _colorIndex: ind
        });
    });
}