Set chart colours based on row values

  • 1
  • Idea
  • Updated 1 year 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 Pat Vachon

Pat Vachon, Champion

  • 45,216 Points 20k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,216 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
        });
    });
}