ZingChart: Can I format crosshair-x timeseries values independent of x-scale values?
Question:
We have a requirement to format crosshair-x text as "yyyy-mm-dd hh:mm:ss" (node's key value) which is different than x-axis transform (date) format "yyyy-mm-dd".
We are using "%kv" as the crosshair-x text value and "%Y-%m-%d" as the transform all value. Is there a way to format this "%kv" within crosshair-x so it shows time in addition to date? Basically, we want to format crosshair-x value independent of x-scale values.
Answer:
There are actually two answers:
1) Formatting dates inside ZingChart using the transform object
This is the recommended way because it uses our basic JSON syntax to format the dates. You must use the [k,v] pair values for your data but you get the benefit of date formatting done within the library.
crosshairX:{
plotLabel: {
headerText: '%kv',
transform: {
type: 'date', // yyyy-mm-dd hh:mm:ss
all: '%Y-%mm-%dd %H:%i:%s'
}
},
scaleLabel: { // adjst the scaleLabel separate from plotLabel
transform: {
type: 'date', // yyyy-mm-dd hh:mm:ss
all: '%Y-%mm-%dd %H:%i:%s'
}
}
},
scaleX:{
transform: {
type:'date',
all: "%Y-%mm-%dd" // yyyy-mm-dd
},
step:'day',
itemsOverlap: true,
item: {
angle:45
},
},
Example: https://demos.zingchart.com/view/4XHGSQ68
Related Documentation
2) Formatting dates outside ZingChart
I've written a function that handles all formatting, returning either an array of strings with just the date, or an array of strings with the date and the time. The date array is used as the values array in scale-x, while the date/time array is used in a custom token, which is then called by the plot-label object.
function formatDate(type){
var values = [];
var date = new Date();
switch (type){
case 'date':
for (var n = 0; n
Example: https://demos.zingchart.com/view/YU6LUE77