How to modify the attributes of nodes in a treemap?

Question

I built a treemap and wanted to alter some attributes of the graph, namely the size of the font used on node descriptions and specify the colors of teh various nodes

When right-clicking on the graph and choosing "View Source" -> "Parsed JSON", I see that the settings are put in each element of labels. How can I access these prior to rendering to force my choices (either global (the font) or per-node (the background colors))?

Since the parsed JSON view shows that, as an example and for a given element of label, "background-color":"#1f1f1f" is set at the same level as text, I tried to put this in my series:

{
  "text": "Candidates",
  "children": [
    {
      "text": "Can not scan: 13 %",
      "value": 13
    },
    {
      "text": "Scanned: 87 %",
      "children": [
        {
          "text": "Not authenticated: 61 %",
          "children": [
            {
              "text": "Confirmed vulnerable: 38 %",
              "value": 38,
              "font-color": "yellow"
            },
            {
              "text": "Unknown: 23 %",
              "value": 23
            }
          ]
        },
        (...)

but "font-color": "yellow" (or any other attribute) is not applied.

score 0 · Accepted Answer · answered Feb 28 '18 at 17:21

0

On our treemaps docs page, first example, we have a palette example of how to change colors. That code looks as follows:

 var myConfig = {
  "type":"treemap",
  "options":{
      "split-type":"balanced",
      "color-type":"palette",
      "palette":["#f44336","#29b6f6","#ab47bc","#ffc107","#5c6bc0","#009688"]
  },
  "plotarea":{
    "margin": "0 0 35 0"
  },
  "series":[
      {
          "text":"North America",
          "children":[
...

If you want to change the fontSize that is done within options.box :

var myConfig = {
  "type":"treemap",
  "options":{
      "split-type":"balanced",
      "color-type":"palette",
      "palette":["#f44336","#29b6f6","#ab47bc","#ffc107","#5c6bc0","#009688"],
      box: {
        fontSize:15
      }
  },
  "plotarea":{
    "margin": "0 0 35 0"
  },
  "series":[
      {
          "text":"North America",
...

Demo here

Relative Documentation: https://www.zingchart.com/docs/chart-types/treemap/#treemap__box

answered Feb 28 '18 at 17:21

nardecky

2,623
8
18

Thank you - I tried to search for these ("treemap") on your site but the search returned just two results (BTW the link to the blog entry is dead). Is it possible to style each box separately and not through a palette (which is applied on a family of nodes)? Taking the example of your last demo, to have, say, Canada red, Texas blue, Mexico green, Europe gray, France magenta, ... In this example of yours, "North America" gets a palette which is then inherited by the children of this node (which is not what I want to do - I need to have unrelated (but specific) colors on each node) – WoJ Feb 28 '18 at 20:21
You can use the `style.backgroundColor` attribute inside each child. ``` "series":[ { "text":"North America", "children":[ { "text":"United States", style: { backgroundColor: 'black', }, "children":[ { "text":"Texas", "value":90 } ] }, ``` Demo here: https://demos.zingchart.com/view/P9Z7HAS4 – nardecky Mar 05 '18 at 21:28

How to modify the attributes of nodes in a treemap?

1 Answers1