How to dynamically set the Minimum and Maximum of the Axes property?

[nimue]

Hi,

I have a linear type graph where on the PrimaryXAxis axis I represent Datetime type data while on the PrimaryYAxis axis I represent money type data; On the axis PrimaryYAxis I also added a representation of the volumes through the Axes property, which I would need to be able to dynamically set the minimum and maximum; it's possible to do it?

This is my code

 @Html.EJS().Chart("containerdue").Rows(rows =>

       {

           rows.Height("20%").Add();

           rows.Height("80%").Add();

       }).Axes(ax =>

       {

           ax.Name("secondary").

           RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).

           RowIndex(1).

           PlotOffset(30).

           Title("Price").

           LineStyle(ls => ls.Width(0)).Add();

       }).Locale("en").ChartArea(area => area.Border(ViewBag.ChartBorder)).Width("100%").TooltipRender("tooltip").UseGroupingSeparator(true).Series(series =>

       {

           series.Animation(ViewBag.animation).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("Time").YName("Value").Name("Asset").YAxisName("secondary").Add();

           series.Animation(ViewBag.animation).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(1).XName("Time").YName("Volume24h").Name("Volume").Add();

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

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

                            .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)

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

                            .MinorTickLines(mtlx => mtlx.Width(0))

                            .LineStyle(lsx => lsx.Width(0))

       ).PrimaryYAxis(py => py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)

                            .StripLines(sl => sl.StartFromAxis(true).Color("black").Opacity(0.03).Visible(true).ZIndex(Syncfusion.EJ2.Charts.ZIndex.Behind))

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

                            .MinorTickLines(mtl=>mtl.Width(0))

                            .LineStyle(ls=>ls.Width(0))

                            .Title("Volume")

                            .ValueType(Syncfusion.EJ2.Charts.ValueType.Double)

       ).Tooltip(tt => tt.Enable(true).Header(ViewBag.Asset)).Load("chartLoad").Loaded("charLoaded").Render()

Thanks so much

Barbara Inzitari

[Kesavan Muthusamy]

Hi Inzitari, 

Thanks for contacting syncfusion support.  We have analyzed your query. This is possible, by setting minimum and maximum of the axis dynamically. By using minimum and maximum property in the axis, you can change this dynamically. Please find the following code snippet.  

        //set maximum for axis 

    function changeMax(args) { 

        var chart = document.getElementById("containerdue").ej2_instances[0]; 

        chart.axes[0].maximum = args.value; 

        chart.refresh(); 

    } 

 

      //set minimum for axis 

    function changeMin(args) { 

        var chart = document.getElementById("containerdue").ej2_instances[0]; 

        chart.axes[0].minimum = args.value; 

        chart.refresh(); 

    } 

 

  

Sample for reference can be find from below: 

 sample 

  

Regards, 

Kesavan 

[nimue]

Hi Kesavan,

thanks for your answer now I can set the minimum and maximum of the axes property.

I ask you one last thing:

 now when I go to click on the legend to remove the volume, the minimum and maximum of the axes property are not reset as when the minimum and maximum are not set by me (I attach two related images).

Is there a way to intervene? maybe intercepting the click event that the user makes on the legend?

Thank you so much for your support.

Barbara Inzitari.

Attachment: Image_c174fa1a.zip

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Thanks for the provided information. 

 

We have analyzed your query with the attached screenshots. We would like to let you know that by default, axis range calculation will be based on chart’s width/height and data, if we didn’t specify the range for axis. In case the range is specified then the chart will be rendered with the specified range only irrespective of data to chart and chart’s width/height.  

 

And regarding the query Is there a way to intervene, we would like to know what you need to do with the legend click, kindly provide us more information on this query. This will be much helpful in further analysis and provide you the solution sooner. 

 

Regards, 

Dharani. 

 

[nimue]

Hi Dharani,

Thank you very much for your reply and for the information regarding the range of the axis.

As for the second query I wanted to know if there is a way to eliminate the minimum and the maximum of the axis property, when the user clicks on the legend to eliminate the display of the volume;

Currently, by clicking on the legend, the volume disappears, but on the side the minimum and maximum are still displayed, which instead should disappear.

In the image that I attach to you, I clicked the legend to remove the volume display, but on the side its minimum and maximum are still displayed.

Thank you very much.

Barbara Inzitari

Attachment: Image_28421b99.zip

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Thanks for the information. 

 

Your requirement can be achieved using the AxisLabelRender event. This event is triggered for each label and here we can customize the text based on the requirement.  

 

We have prepared a sample in which we have two vertical axes and we have rendered the second series (named with Volume) with respect to primaryYAxis. So, when the legend (Volume) is clicked, based on the series visibility we have specified empty string to the text in AxisLabelRender event. Now when the series is hidden, there will not be any labels rendered for primaryYAxis. You can change this with respect to your requirement. 

 

Code Snippet: 

 

@Html.EJS().Chart("container").PrimaryYAxis(pr=>pr.Title("Volume")) 

.AxisLabelRender("axisLabels").Render() 

 

function axisLabels(args) { 

        if (isChartLoaded && args.axis.title === 'Volume' && !args.axis.series[0].visible) { 

            args.text = ""; 

        } 

    } 

 

Screenshot: 

Before Hiding the volume series: 

 

 

After Hiding the Volume Series: 

 

Sample for reference can be find below. 

http://www.syncfusion.com/downloads/support/forum/140150/ze/chartSample1188782833  

 

Thanks, 

Dharani. 

[nimue]

Hi Dharani,

thank you very much for your support and for the example, now it works.

Barbara Inzitari

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Most welcome. Kindly get in touch with us, if you would require further assistance. 

 

Thanks, 

Dharani.