ZingChart: Can I Have Multiple ValueBoxes?

valuebox is a very flexible feature within ZingChart. First, you should consider if your valuebox is going to be fairly consistent between all of your plots or if they are going to be very different.

You can set valuebox within plot:{} . This will associate the valuebox configuration to all plots. If you are going to need to configure valuebox in a unique way for each plot you can choose to set your valuebox inside each individual series:[{},{}...] object.

Text can be addressed via tokens and even though you will want your text to be unique across each plot this does not necessarily mean you need to define valuebox within series:[]

Here is valueBox set in plot:{}

{
 	type: 'bar',
 	plot:{
 	  valueBox:{
 	    text:'Value: %v',
 	    fontAngle: 90,
            offsetY: -20
 	  }
 	},
	series: [
		{
		  values: [35,42,67,89]
		},
		{
		  values: [25,34,67,85]
		}
	]
};

Here is a case where you might set valueBox inside series:[]

{
 	type: 'bar',
	series: [
		{
		values: [35,42,67,89],
		valueBox:{
   	            text:'Value: %v',
   	            fontSize: 12,
   	            fontAngle: 90,
   	            offsetY: -20
 	        }
		},
		{
		values: [25,34,67,85],
		valueBox:{
   	           text:'Value:<br>%v',
   	           fontSize: 12,
                   placement: 'in',
                   offsetY: 20,
                   fontColor: '#fff'
 	        }
		}
	]
};

Setting multiple valueboxes

You can see in the demos above that valuebox is being configured as an object like this:

valuebox:{
    text: 'some text'
}

Using this syntax you can configure a single valuebox . To create multiple valueboxes you will want to configure your valuebox as an array of objects:

valueBox:[
    {
        text: 'valuebox 1',
        placement: 'top'
    },
    {
        text: 'valuebox 2',
        placement: 'middle'
    }
]

Here is a full demo:

{
 	type: 'bar',
 	plot:{
 	  valueBox:[
 	    {
 	      text: 'Value: %v',
 	      placement: 'top'
 	    },
 	    {
 	      text: 'Other Text: %kv',
 	      placement: 'middle',
 	      fontColor: 'white',
 	      fontAngle: -90
 	    }
 	  ]
 	},
	series: [
		{
		  values: [35,42,67,89]
		},
		{
		  values: [25,34,67,85]
		}
	]
};

ZingChart: Can I Have Multiple ValueBoxes?

Documentation Links