[Solved] Align category labels with line values

[Gert]

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!

[Daniel]

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

[Gert]

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

[Daniel]

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

[Gert]

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!

[Daniel]

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