This is a migrated thread and some comments may be shown as answers.

Align majorgridlines with custom label template

1 Answer 28 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Daní
Top achievements
Rank 1
Daní asked on 06 Mar 2017, 08:31 AM

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#'
        }
      })
    });

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Mar 2017, 07:16 AM
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 (charts) and form elements.
Tags
Charts
Asked by
Daní
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or