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

Align category labels with line values

5 Answers 115 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Gert
Top achievements
Rank 1
Gert asked on 16 Jan 2017, 09:12 AM

Hi,

If my chart has only a line series, then the category axis labels align with the line values. But if i add an area series too, then the labels align with the area values instead of the line values.

Is it possible to have both, a line and an area series, but to keep the category axis labels aligned with the line values? (in the images, the grey area has 2 values: 0, 0)

@(Html.Kendo().Chart()
  .Name("graph")
  .Title("")
  .Legend(legend => legend.Visible(false))
  .Series(series =>
  {
      //light grey area
      series.Area(Model.Model.GreyAreaValues).Name("GreyArea").Color("#F2F2F2").Opacity(1).Line(l =>
      {
          l.Color("#F2F2F2");
          l.Style(ChartAreaStyle.Step);
          l.Width(4);
      }).Axis("valuesAxis").Markers(false);
 
      //blue line
      series.Line(Model.Model.BlueLineValues).Name("BlueLine").Color("#3399FF").Width(4).DashType(ChartDashType.Solid).Markers(false).Style(ChartLineStyle.Step);
  })
  .CategoryAxis(axis => axis.Name("categoryAxis")
      .Categories(Model.Model.CategoryValues)
      .MajorGridLines(lines => lines.Visible(false))
      .Labels(l => l.Format(CateGoryLabel)
          .Margin(1)).Justify(true)
      .Labels(l => l.Font("'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans - serif"))
  )
  .ValueAxis(axis => axis
      .Numeric("valuesAxis")
      .Labels(labels => labels.Format("{0:C}"))
      .Labels(l => l.Font("'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans - serif"))
      .AxisCrossingValue(-10)
      .MinorGridLines(l => l.Visible(false))
      .MajorGridLines(l => l.Visible(false))
  )
  .Tooltip(tooltip => tooltip
      .Visible(true)
      .Format("{0}%")
      .Template("#= kendo.toString(value, \"c\") #")
  )

 

Thank you in advance!

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Jan 2017, 11:50 AM
Hello,

I am not sure if I understand correctly what you mean by aligned but the step style requires not justified category axis. The justified option is automatically set for area series but due to a bug this is not currently done for line series. The line values should still be aligned with the labels. This will be visible if the markers are shown for the line series.

Regards,
Daniel
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.
0
Gert
Top achievements
Rank 1
answered on 18 Jan 2017, 03:04 PM

Hi Daniel,

Thank you for your reply. I've made markers visible for the line series but the labels are still not in the needed position.

The modified code:

//blue line
 
series.Line(Model.Model.BlueLineValues).Name("BlueLine").Color("#3399FF").Width(4).DashType(ChartDashType.Solid).Markers(true).Style(ChartLineStyle.Step);

 

Am i missing something?

Kind regards

0
Daniel
Telerik team
answered on 19 Jan 2017, 08:19 AM
Hello again,

The font configuration is not correct(it should contain both the size and family), but this does not seem to be causing an issue at least on my side. I created an example using the configuration from the code that you provided. Could you check it and let me know if it is displayed as expected or if I am missing something else?

Regards,
Daniel
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.
0
Gert
Top achievements
Rank 1
answered on 19 Jan 2017, 11:37 AM

Hi Daniel,

Current behavior:

the blue line goes up from $0.00 to $5.00 => the category axis label is put under the new blue line value (in the middle of the new value step segment)

What I'm trying to achieve:

the blue line goes up from $0.00 to $5.00 => the category axis label is put under the new blue line value (at the beginning of the new value step segment)

I used the chart from the example you provided to make a visual representation of this. I hope this make things more simple.

Thank you for your help!

0
Accepted
Daniel
Telerik team
answered on 23 Jan 2017, 08:11 AM
Hello,

I am afraid that this is not supported. As I mentioned previously, the step style requires not justified axis in which case the labels and the points will be placed in the middle of the category. A possible approach to render the labels in the beginning of the category is to use custom visual(example), but the points will still be shown in the middle.

Regards,
Daniel
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.
Tags
Charts
Asked by
Gert
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Gert
Top achievements
Rank 1
Share this question
or