ZingChart - Alter Properties of ValueBox

Question

I am using ZingChart to create a simple Pie Chart. I am using ColdFusion tags and a json file to style the chart. In the example below, my "target" series (the one I want to “highlight”) is 2, and I manipulating that slice by offsetting it and putting a border around it (see example). The problem with this is if the pie slice is very small, the border isn’t distinguishable.

My goal is to highlight the single valuebox associated with my target slice/series. I’ve research and experimented with the “rules”. The example below is hard-coded for the %v = 17.1 (which happens to be the value for series 2). The valuebox in this example has a border underneath it, which is great. But I can’t use the value token (%v) because there might be more than one series with the same value. I’ve tried many of the available tokens, and I can’t seem to get to find one that represents the “target” series that I identify. I thought it might be straightforward to highlight based on the text of the plot (%t) but I tried and that isn’t working either.

I tried playing around with the “custom token” feature, but won’t go into that at the moment as that didn’t work either.

How can I “highlight” the valuebox for series 2, presumably using a rule (hopefully using an available token)?

{
   "graphset":[
      {
         "type":"pie",
         "scale":{ "size-factor":"69%"},
         "plot":{
            "valueBox":{
               "rules":[
                  {
                     "rule":"%v==17.1",
                     "fontSize":18,
                     "fontColor":"black",
                     "font-family":"Arial",
                     "border-bottom":"2px solid black"
                  }
               ],
               "placement":"out",
               "text":"%t:%v",
               "fontSize":16,
               "fontColor":"black",
               "font-family":"Arial"
            }
         },
         "series":[
            {
               "values":[ 1 ]
            },
            {
               "values":[ 2 ],
               "offset-r":"5%",
               "border-color":"black",
               "border-width":"3"
            },
            {
               "values":[ 3 ]
            },
            {
               "values":[ 4 ]
            }
         ]
      }
   ]
}

Thanks

Answer 1

It sounds like you are looking for the %p or %plot-index token (they are the same). This will allow you to modify the valueBox based on the index of your series.

I have included a demo here: http://demos.zingchart.com/view/NRSRN7VT

{
    type: "pie",
    plot:{
      valueBox:{
        text: "%t: %v",
        placement: "out",
        rules:[
          {
            rule: "%p == 1",
            color: "black",
            fontStyle: "italic",
            borderColor: "red",
            borderWidth: 2,
            shadow: 0,
            padding: 10
          }
        ]
      }
    },
    series : [
        {
            values : [35]
        },
        {
            values : [20]
        },
        {
            values : [15]
        }
    ]
}

I am on the ZingChart team. Hopefully this solves your problem.