dynamic categoryAxis

[Morten]

I'm trying to add an axis to the categoryAxis to a stacked area chart http://dojo.telerik.com/@[e-mail]/UlEju

My data is date based but has gaps which show up when I set:

categoryAxis: {
field: "Date",
baseUnit: "day"
}

When I set baseUnit to "month" the chart loose the fine details.

I would like to add major ticks to the categoryAxis showing months and keep the fine details.

Is this possible?

 

 

[T. Tsonev]

Hello,

First, you need to ensure that the Chart is treating your data as date series. For this to work, the field storing the date must be an actual date.

The data source will do the conversion for you if you specify a schema with a model definition.
        dataSource: {
          data: data,
          schema: {
            model: {
              fields: {
                "Date": { type: "date" }
              }
            }
          }
        }

As for the original question, the date axis doesn't currently support displaying labels at different time resolution. It's possible to work around this limitation by using a second axis. See the updated snippet.

This however is not an ideal solution as we loose the synchronization between the labels and the series data points. There might be situations where they're not perfectly aligned. This is something we're looking to solve in future versions.

Regards,
T. Tsonev
Telerik

 

 

[Morten]

thanks for your suggestion.

However, as you point out I loose the sync between labels and data (which I need).

I look forward to a future solution

[T. Tsonev]

Hi,

For the moment, the only way to ensure synchronization between the data and the labels is to explicitly set min and max dates on the axes:
        categoryAxis: [{
          // default axis
          visible: false,
          baseUnit: "days",
          baseUnitStep: 1,
          
          min: new Date("2015-08-28"),
          max: new Date("2016-02-14")
        }, {
          // Labels axis
          baseUnit: "months",
          roundToBaseUnit: false,
          labels: {
            rotation: "auto"
          },
          
          min: new Date("2015-08-28"),
          max: new Date("2016-02-14")
        }]

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik