How to set font attributes for all text in a chart?

Question

I have a ZingChart (through cfchart) that has an external JSON styling file. How can I set font attributes, such as font-family, font-weight, font-size for all text in the chart, without setting it individually?

My JSON file so far:

{
"graphset":[
    {       
        "background-color":"white",
        "font-family":"Courier New",
        "scale-x":{
            "label":{
                "text":"Date"
            }
        },
        "scale-y":{
            "label":{
                "text":"Score"
            },
            "markers":[
                {
                    "type":"line",
                    "range":[75,76],
                    "line-color":"red"
                },
                {
                    "type":"line",
                    "range":[50,51],
                    "line-color":"yellow"
                }
            ]
        },
        "tooltip" : {
            "text" : "Score of %v on %k",
            "background-color" : "#ff9900"
        },
        "plot":{
            "marker":{
                "type":"square"
            }
        }
    }
  ]
}

I know that I can add it individually for, say, all scale-x "item"s":

"scale-x":{
            "label":{
                "text":"Date"
            },
             "item":{ 
                "font-angle":320,
                "font-family":"Arial",
                "font-weight":"bold",
                "font-size":13
            }
        }

But I want to add it for all text in the chart.

Answer 1

You can use CSS descendant selectors to do this. Use your chart div's id and the tspan element selector to apply font-family, font-weight, font-size, etc..., to all of the text elements in a chart. Example for a chart render at div id="zc":

<style>
#zc tspan { font-family: Comic Sans, Comic Sans MS, cursive !important;font-weight:bold !important;font-size:12px !important; }
</style>

Demo here

Sorry for the confusion, here's a non-CSS solution:

Within your chart JSON object, place the "globals" object with the desired global attributes in the root level (same level as "graphset"):

  {      
    "globals":{
      "font-size":20,
      "font-family":"Papyrus"
    },
    "graphset":[
      {
        "type":"line",
        ...
      }
    ]
  };

New demo here