Search code examples
chartszingchart

How to modify the attributes of nodes in a treemap?

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

enter image description here

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.

Solution

  • 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