How to give custom color to tree map in anychart.js

Question

I am creating this tree map and I have different values What I want is different shades of colors(green for postive and red for negative) on different ranges of points. The issue is in my callback function I am accessing the value parameter but points is not available. Also the second issue is I want the font size according to the size of the box. As there are some boxes which are very big but the font size looks very small. I think If i get that color part fix I can set the fontsize on my own

 <!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
    <script src="https:/cdn.anychart.com/releases/v8/js/anychart-treemap.min.js"></script>
    <title>My First JavaScript Treemap Chart</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <style>
        span {
            color: #fff;
            font-size: 14px;
        }
    </style>
    <script>
        anychart.onDocumentReady(function () {
            var chart = anychart.treeMap(getData(), "as-tree");

            chart.maxDepth(2);

            chart.hintDepth(1);

            chart.hintOpacity(0.7);

            chart.labels().useHtml(true);
            chart.labels().format(
                "<span style='font-weight:bold; color: #fff;'>{%name}</span><br>{%points}"
            );

            chart.tooltip().useHtml(true);
            chart.tooltip().format(
                "COMPANY : {%name}%<br>PERCENTAGE CHANGE: {%points}%<br>MARKET CAP: {%points}<br>VOLUME: {%points}<br>"
            );

            chart.container("container");

            chart.draw();

            var customColorScale = anychart.scales.linearColor();
            customColorScale.colors(["green", "red",]);
            console.log(chart)

            chart.colorScale(customColorScale);

            // chart.colorRange().enabled(true);
            chart.colorRange().length("100%");
            chart.fontColor = 'white'

            chart.fill(coloringFunction);



            function coloringFunction(value, points, name) {

                console.log(value)
                if (this.value < 0) {
                    return 'red'

                }
                else if (this.value > 0) {
                    return 'red'
                }

            }

            /*chart.title().useHtml(true);
            chart.title(
                "<span style='font-size:18; font-style:bold'>PSX TREE MAP </span><br><i><span style='font-size:14; font-style:italic'>UPDATED(7:11 PM)</i>"
            );*/

        });

        // get data
        function getData() {
            // create data
            var data = [
                {
                    name: "PAKISTAN STOCK EXCHANGE",
                    children: [
                        {
                            name: "TECH ",
                            children: [
                                {
                                    name: "HUMNL",
                                    value: 24,
                                    points: 0.26

                                },
                                {
                                    name: "TRG",
                                    value: 6,
                                    points: 2.3
                                    ,
                                    points: 0.26

                                },
                                {
                                    name: "SYS",
                                    value: 55,
                                    points: 4.26


                                }
                            ]
                        },
                        {
                            name: "SUGAR & ALLIED INDUSTRIES ",
                            children: [
                                {
                                    name: "AGSML",
                                    value: 12,
                                    points: 2.26



                                },
                                {
                                    name: "MIRKS",
                                    value: 14,
                                    points: 3.26
                                    ,

                                },
                                {
                                    name: "ALNRS",
                                    value: 15,
                                    points: 0.26

                                }
                            ]
                        },
                      



                    ]
                }
            ];

            return data;
        }


    </script>
</body>

</html>

score 1 · Answer 1 · answered Nov 01 '21 at 06:28

To achieve the coloring you should provide ABS value for the "size" field in the data. But the "value" field may reflect positive/negative values. Like this:

{name: "Point 1",        value: -11443830, size: 11443830}

Exactly the "value" field is used for linear and ordinal coloring. The treemap supports both, you can learn more about it in the documentation article. In your case, you can create and adjust linear scale like this:

  // create and configure a color scale.
  var customColorScale = anychart.scales.linearColor();
  customColorScale.minimum(-100000000).maximum(100000000);
  customColorScale.colors(["red", "green"]);

  // set the color scale as the color scale of the chart
  chart.colorScale(customColorScale);

Min/max apply as you need or do not apply it to calculate them automatically.

To adjust label fontsize for every item simply enable adjustFontSize() setting:

  chart.labels().adjustFontSize(true);

For details, check the sample we prepared.

anychart.onDocumentReady(function () {

  // create data
  var data = [
    {name:   "European Union", children: [
      {name: "Belgium",        value: -11443830, size: 11443830},
      {name: "France",         value: 64938716, size: 64938716},
      {name: "Germany",        value: 80636124, size: 80636124},
      {name: "Greece",         value: -10892931, size: 10892931},
      {name: "Italy",          value: 59797978, size: 59797978},
      {name: "Netherlands",    value: -17032845, size: 17032845},
      {name: "Poland",         value: 38563573, size: 38563573},
      {name: "Romania",        value: -19237513, size: 19237513}, 
      {name: "Spain",          value: 46070146, size: 46070146},
      {name: "United Kingdom", value: 65511098, size: 65511098}  
    ]} 
  ];

  // create a chart and set the data
  var chart = anychart.treeMap(data, "as-tree");

  // create and configure a color scale.
  var customColorScale = anychart.scales.linearColor();
  customColorScale.minimum(-100000000).maximum(100000000);
  customColorScale.colors(["red", "green"]);

  // set the color scale as the color scale of the chart
  chart.colorScale(customColorScale);

  // add a color range
  chart.colorRange().enabled(true);
  chart.colorRange().length("80%");
  
  chart.labels().adjustFontSize(true);

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>

How to give custom color to tree map in anychart.js

1 Answers1