Search code examples
datechartsaxiszingchart

Zingchart date scale-x ticks and guides at year-end dates

I am creating a chart with a date x scale over a ten year range. The scale step is set to "year" and I am setting the min and max. The chart renders fine, but I would like the ticks, guides and labels to appear at each year-end date over the range of the scale instead of starting at the minimum and "stepping" one year per tick. Is there a way to configure this?

Here is an example chart definition.

var chartData = { "type":"line",
                  "utc":true,
                  "timezone":0,
                  "scale-x":{ "min-value":1153180800000,
                              "max-value":1470441600000,
                              "step":"year",
                              "transform":{ "type":"date",
                                            "all":"%m/%d/%y" },
                              "guide":{ "visible":true,
                                        "line-color":"#666666",
                                        "line-style":"solid",
                                        "line-width":1,
                                        "alpha":0.5 },
                              "item":{ "font-size":12 } },
                  "scale-y":{ "placement":"default",
                              "format":"%v",
                              "values":"1.00:14.00:2.6",
                              "item":{ "font-size":12 } },
                  "series":[ { "type":"line",
                               "scales":"scale-x,scale-y",
                               "marker":{ "type":"none" },
                               "values":[ [1159574400000,10.67],[1167523200000,11.06],[1175299200000,11],[1183161600000,11.2],[1191110400000,10.86],[1199059200000,11.2],[1206921600000,12.01],[1214784000000,12.93],[1222732800000,9.38],[1230681600000,6.27],[1238457600000,3.68],[1246320000000,2.8],[1254268800000,7.15],[1262217600000,9.35],[1269993600000,11.45],[1277856000000,11.51],[1285804800000,10.7],[1293753600000,11.05],[1301529600000,10.87],[1309392000000,10.09],[1317340800000,8.73],[1325289600000,7.4],[1333152000000,7.27],[1341014400000,6.83],[1348963200000,8.01],[1356912000000,6.71],[1364688000000,6.45],[1372550400000,7.01],[1380499200000,6.87],[1388448000000,8.59],[1396224000000,8.46],[1404086400000,8.8],[1412035200000,8.27],[1419984000000,7.73],[1427760000000,7.62],[1435622400000,7.03],[1443571200000,6.74],[1451520000000,4.81] ] } ] };
Solution

  • Is this what you're looking for? http://demos.zingchart.com/view/TJC35HUK To force the scale labels, guides, and ticks to show, you'll want to add the following to your "scale-x" object:

    • "items-overlap": true //forces the scale items to display
    • "max-items": 11 //sets the maximum number of scale items shown

    Because "max-items" determines the maximum (and not always actual) number of scale items shown, you sometimes need to play around with the font size (I lowered it to 10) and label formatting (you could display just the month and year (%m/%y), for example, while expanding to display the full date through the tooltips or crosshairs). There's more info on time-series formatting for the scales, tooltips, and crosshairs here: https://www.zingchart.com/docs/basic-elements/zingchart-tokens/#time-series-tokens

    Please let me know if that helps. I'm a member of the ZingChart team, and happy to answer further questions.