We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Two intervals on line chart?

I am trying to figure out how I can have two different intervals in my chart, something along the lines of a first interval that starts at 0 and increments by 2500 to a max of 10000, followed by a much larger interval that would start at 10000 and increments by an interval of 200000 for instance.  Hopefully that makes sense, but the smaller interval would go where I have the red box in this picture and the larger interval would begin above that box.

This is what I currently have for my chart:

@Html.EJS().Chart("container").Series(series =>



               .Marker(mr => mr.Visible(true).Width(1).Height(1).Shape(Syncfusion.EJ2.Charts.ChartShape.Circle).IsFilled(true)).YName("InvestmentBalance").Name("InvestmentBalance")



               .Marker(mr => mr.Visible(true).Width(2).Height(1).Shape(Syncfusion.EJ2.Charts.ChartShape.Triangle).IsFilled(false)).YName("RetirementIncome").Name("RetirementIncome")



               .Marker(mr => mr.Visible(true).Width(2).Height(1).Shape(Syncfusion.EJ2.Charts.ChartShape.Diamond).IsFilled(false)).YName("AssetBalance").Name("AssetBalance")


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)

           .MajorGridLines(mg => mg.Width(0))


       ).PrimaryYAxis(py => py.Title("Balance")

           .MajorTickLines(mt => mt.Width(0))

           .LineStyle(ls => ls.Width(1)).Interval(ViewBag.Interval).Minimum(ViewBag.Minimum).Maximum(ViewBag.Maximum)

       ).Title("Retirement Outlook").Tooltip(tt => tt.Enable(true)).ChartArea(area => area.Border(br => br.Width(1))).LegendSettings(leg => leg.EnableHighlight(true)).Render()

5 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team March 27, 2023 11:27 AM UTC

Hi Scott,

Greetings from Syncfusion.

We can decide the number of intervals to be rendered between intervals by setting the minorTicksPerIntervals property based on your requirement in the primaryYAxis. We have created an application to demonstrate the same. Please find the below stackblitz link for your sample reference.

Sample link: https://stackblitz.com/edit/bcaeig?file=index.js

Code Snippet:

primaryYAxis: {

            title: 'Million Metric Tons',

            labelFormat: '{value}',

            rangePadding: 'None',

            minimum: 0,

            maximum: 20000,

            interval: 10000,

            lineStyle: { width: 0 },

            minorTicksPerInterval: 2,

            majorTickLines: { width: 0 },

            minorTickLines: { width: 2, color: "black" }



Please let us know if the above sample meets your requirement. If not, please let us know exact requirement. It will be helpful for us to analyze further and assist you better.



SC Scott March 27, 2023 01:53 PM UTC

Thank Swetha, I am actually looking for something more like the scale break (without the line going across the chart) which is available in your WPF chart.

Scale Breaks in WPF Charts control | Syncfusion

Is this supported in your Asp.net MVC charts?

SB Swetha Babu Syncfusion Team March 28, 2023 08:09 AM UTC


As of now, we do not have support for the scale break in chart. However, we have considered the reported scenario as an improvement and created a feature request for the same. This improvement will be included in any of our upcoming releases. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/42426/support-for-scale-break-in-chart

Please get back to us if you need further assistance.

Marked as answer

SC Scott March 28, 2023 01:21 PM UTC

Much appreciated Swetha, thank you.

SB Swetha Babu Syncfusion Team March 29, 2023 04:34 AM UTC


Please get back to us if you need further assistance.

Live Chat Icon For mobile
Up arrow icon