Search code examples
javascripthighchartstreemap

Is there a way of implementing shades of colors in treemap for childs of specific parent

I have a jsfiddle with 3 parents ( Banana, apple, orange ) and when treemap renders for example Banana has objects with values ( Rick, Anne, Susane ) and what it renders is same color ( yellow in this example ) and my goal is for example if value of that object is 10 to be yellow with no blurred to yellow, and if value of that object is 1 to be almost white with hint of yellow. Is there an algorithm that handles that ? I am quite sure that this is already known request from people.

For now I managed to create in one fiddle those parents with childs, and in other I managed to produce different versions of shades of that specific color

this is data of parents and kids enter image description here

{
            id: 'A',
            name: 'Apples',
            color: "#EC2500"
        }, {
            id: 'B',
            name: 'Bananas',
            color: "#ECE100"
        }, {
            id: 'O',
            name: 'Oranges',
            color: '#EC9800'
        }, {
            name: 'Anne',
            parent: 'A',
            value: 5
        }, {
            name: 'Rick',
            parent: 'A',
            value: 3
        }, {
            name: 'Peter',
            parent: 'A',
            value: 4
        }, {
            name: 'Anne',
            parent: 'B',
            value: 4
        }

and this is result that I would like to implement into fiddle above with different shades of yellow, red and orange enter image description here

{
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: '#FFFF33'
        // maxColor:Highcharts.getOptions().colors[0]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'Rick',
            value: 6,
            colorValue: 1
        }, {
            name: 'Anne',
            value: 6,
            colorValue: 2
        }, {
            name: 'Susane',
            value: 4,
            colorValue: 3
        }, {
            name: 'Peter',
            value: 3,
            colorValue: 4
        }, {
            name: 'E',
            value: 2,
            colorValue: 5
        }, {
            name: 'F',
            value: 2,
            colorValue: 6
        }, {
            name: 'G',
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
}

This is the fiddle with shades of yellow https://jsfiddle.net/bpc7fd49/1/ and this is fiddle where I am trying to implement those shades instead of having only one version of yellow red or orange color https://jsfiddle.net/7z5ngLva/3/

Solution

  • I've managed to find an answer

    stops = [
            [0.25, '#EC2500'],
            [0.5, '#ECE100'],
            [0.75, '#EC9800'],
            [1, '#9EDE00']
        ],
        distance = stops[1][0] - stops[0][0],
        modifiedStops = [];

    $.each(stops, function (i, stop) {
        modifiedStops.push([stop[0] - distance - 0.001, '#ffffff']);
        modifiedStops.push(stop);
        modifiedStops.push([stop[0] + 0.001, stop[1]]);
    });

    whole fiddle http://jsfiddle.net/4egy85fw/