Stepline series with category x axis

Question

I would like to put a step line series on a chart with a category x axis and have the "step" occur at the start of the category, instead of the center.

Durga Gopalakrishnan · Accepted Answer

Hi Steven, 

By default, for category axis type, chart series points will be rendered in centre that is between the gaps of two interval and if we specify different x point for two series, then it will rendered separate column. As of now, we don’t have support to achieve your requirement. Please revert us, if you have concerns. 

Regards, 
Durga G

Srihari Muthukaruppan · Answer

Hi Steven, 

  

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by setting labelPlacement property as onTicks in the chart. We have also prepared a sample for your reference. Please find the below code snippet and screenshot. 
  
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/StepLine416816933.zip 
  
Code Snippet: 




  @Html.EJS().Chart("container-vertical").Series(series => 
       {
        // add your additional code here
       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
        .LabelPlacement(Syncfusion.EJ2.Charts.LabelPlacement.OnTicks)               // add your additional code here         .Render() 

 
  
Screenshot: 

 
  
If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner. 
  
Regards,Srihari

Steven Wright · Answer

Thank you for the response. This got me closer. However, I am plotting a column chart on the same chart. I would like to use the step line to visualize an upper threshold. I know this could be accomplished with a segmented strip line, but I would prefer to have a single line rather than a painted area.

Your solution also moved the columns so the line is in the center of a column instead of at the start.

Durga Gopalakrishnan · Answer

Hi Stevan, 

We are validating your reported scenario. We will update the status within one business day(4th August, 2020). We appreciate your patience until then. 

Regards, 
Durga G

Durga Gopalakrishnan · Answer

Hi Steven, 

We have validated your reported scenario. As of now, we don’t have support to render stepline chart from start axis for category axis type. We have logged a feature request on this. This feature will be included in our upcoming Volume 3 main release which is expected to be rolled out at end of September, 2020. You can keep track of the feature from the feedback portal below.   
   
Feedback link : https://www.syncfusion.com/feedback/16651/ 
   
If you have any more specifications or suggestions to the feature request, you can add it as a comment in the portal.  
  
Kindly revert us, if you have any concerns.  
  
Regards,  
Durga G

Durga Gopalakrishnan · Answer

Hi Steven, 
 
We have prepared sample as per your requirement and attached for your reference. By default, label placement is specified as between ticks, so that column rectangle will be placed between ticks and step line chart rendering is from start of axis.  
 
  
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Stepline-736936148.zip 
 
Please revert us, if you have any concerns. 
 
Regards, 
Durga G

Steven Wright · Answer

Thank you for your response. It is closer to what we are trying to do, but it's still not quite there. I have attached an image. The columns are correct, but the line graph portion is not. I've drawn a red line to indicate what I am trying to accomplish.

Attachment: BarGraphWithThresholdExample_950f13e2.zip

Szilard Mihocsa · Answer

Hi,is there any news regarding this topic? I would like to achieve the same thing like Steven but in Angular.Regards,Szilard

Durga Gopalakrishnan · Answer

Hi Szilard,We suggest you to use different x axis for each series with one axis labelPlacement as BetweenTicks and another one as OnTicks. We have prepared sample based on your requirement. Please check with the below snippet and screenshot.

public axis: Object = [{ visible: false, labelPlacement: 'OnTicks', name: 'xAxis' }]; public primaryXAxis: Object = { labelPlacement: 'BetweenTicks' }; Sample : https://stackblitz.com/edit/angular-4pwgzfKindly revert us if you have any concerns.Regards,Durga Gopalakrishnan.

Szilard Mihocsa · Answer

Hi Durga,thank you for your response. Your sample is working like a charm, I just tried to implement it into my code but unfortunately it doesn't work. I set the labelPlacement for the primaryXAxis to BetweenTicks and added an additional axis for the StepLine chart and set the labelPlacement to OnTicks, but it doesn't work. I tried to set the labelPlacement of the additional axis to OnTicks than to BetweenTicks but there is no difference so I suppose there is something wrong with my additional axis. Note: I'm using the StepLine chart with the additional axis in *ngFor. Could this be something that doesn't let the additional axis to react to the labelPlacement change? Here you have an example:

.ts file: primaryXAxis: object = [{ valueType: 'Category', rangePadding: 'Additional', labelPlacement: 'BetweenTicks', edgeLabelPlacement: 'Shift', }]public axisPlot: Object = [{ valueType: 'Category', visible: false, labelPlacement: 'BetweenTicks', name: 'xAxisPlot', }];Attachment: 2_de530721.zip

Durga Gopalakrishnan · Answer

Hi Szilard,Most welcome. We have prepared sample with ngFor for series collection. Please check with the below snippet and sample. app.component.html

app.component.ts public dataTotal: Object[] = [ { data : [ { x: new Date(1975, 0, 1), y: 16 }, //… ], seriesName: 'China', axisName:'primaryXAxis', type:'Column' }, { data : [ { x: new Date(1975, 0, 1), y: 10 }, //… ], seriesName:'Australia', axisName:'xAxis', type: 'StepLine' } ]; Sample : https://stackblitz.com/edit/angular-4pwgzf-ytizxeKindly revert us if you have any concerns.Regards,Durga Gopalakrishnan.