Align majorgridlines with custom label template

2 posts, 0 answers
  1. Daní
    Daní avatar
    314 posts
    Member since:
    Feb 2008

    Posted 06 Mar 2017 Link to this post

    Hi,

    I have a line chart with a x-axis based on time. Since there are multiple measures for each month, I'm just showing the label for the first day of each month. But I'm having trouble with the majorGridLines property. If I set it to true, all the lines are shown (attached figure 1). Another possibility is to show the grid lines in steps of 30, but of course, since each month has a different number of days, some values are shown in the wrong x-axis label...

    Is there a way to align the majorGridLines with the custom labels?

    Here is my code:

    samples.forEach((s:any) => s.date = s.date.toDate());
     
        this.panes.push({
          clip: false,
          name: 'samples'
        });
     
        this.categoryAxis.push({
          name: 'samples',
          pane: 'samples',
          labels:  {
            visible: true,
            template: "#= value.getDate() == 1 ? kendo.toString(value, 'MMMM') : '' #",
            step: 1
          },
          majorGridLines: {
            visible: true,
            //step: 30
          },
          majorTicks: {
            visible: false
          },
          minorGridLines: {
            visible: false
          },
          justified: true,
          baseUnit: 'days'
        });
     
        this.valueAxis.push({
          name: 'samples',
          pane: 'samples',
          visible: true
        });
     
        let variables = Helpers.distinctInArray(samples, (i: MonitorSample) => i.variable);
        variables.forEach(v => {
          let filteredSamples = samples.filter(s => s.variable == v);
          this.series.push({
            name: v,
            type: 'line',
            line: {
              style: 'smooth'
            },
            field: 'value',
            categoryField: 'date',
            axis: 'samples',
            categoryAxis: 'samples',
            data: filteredSamples,
            tooltip: {
              visible: true,
              template: '#=value# #=category#'
            }
          })
        });
  2. Stefan
    Admin
    Stefan avatar
    2319 posts

    Posted 08 Mar 2017 Link to this post

    Hello Daní,

    By design, the majorGridLines are based on the set baseUnit and the majorTicks.

    Currently, setting the step is the only option, but as noted there will be small misalignment between the labels and the majorGridLines.

    Apologies for the inconvenience this may cause you.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top