Jump to content
JChartFX Community
  • 0

setCustomSteps issue Y Axis



The Axis.setCustomSteps() property is not working. I am using a Gallery.Bar graph with 52 items being rendered with a range of  items with values of 2 to items with values of 7000. The issue is that the items that have a value of 2 are so thin in comparison with the 7000 items that they dont show up on the graph. I was hoping to use setCustomSteps() to maybe enlarge the bottom part of the graph. so someone can see it. Any help would be appreciated.


Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Axis.CustomSteps is currently not supported but it would not help on what you are trying to achieve, imagine an axis that goes from 0 to 100, our algorithm might decide that 20 is a suitable step, if you want to override this you would use setStep to manually set the step to 25. CustomSteps (if supported) would allow you to pass an array of 20 70 10 so the visible labels would be 0, 20, 90, 100.

Note that in all cases the axis would be linear so two values of 0.2 and 0.25 would indistinguishable.

There is an option but I am not sure if it would work in your scenario to set the axis to be logarithmic.

We currently do not have a feature in jChartFX where the axis would be broken up in two segments, e.g. 0-10 and then immediately start at 5000-7000. This is something we are considering supporting in future versions of the product.



Link to comment
Share on other sites

  • 0

Two panes would be a reasonable approach, note that this assumes you can find the "magic" value (50) that breaks the axis, in order to have 2 panes you will need 2 series and with 2 series you will have to make sure you later "hide" this extra series from legend box, tooltips, etc.

    var data = [

                 { "Item": "A1", "Value": 30 },

                 { "Item": "A2", "Value": 5530 },

                 { "Item": "A3", "Value": 50 },

                 { "Item": "A4", "Value": 12 },

                 { "Item": "A5", "Value": 5900 },

                 { "Item": "A6", "Value": 5740 },



    var break1 = 50;

    var break2 = 3000;

    var maxValue = 6000;


    // Translate data to have 3 series, note that this relies on finding break values

    // Value and LargeValue will be used to plot bars in different panes, RealValue used for ToolTips

    var panedData = new Array();

    var n = data.length;


    for(var i = 0; i < n; i++) {

        var value = data.Value;


        var newObj = new Object();

        newObj["Item"] = data.Item;

        newObj["RealValue"] = value;


        if (value <= break1) {

            newObj["Value"] = value;

            newObj["LargeValue"] = cfx.Chart.Hidden;

        } else {

            newObj["Value"] = break1;

            newObj["LargeValue"] = value;






    // Make sure only Value and LargeValue are plotted

    var fields = chart1.getDataSourceSettings().getFields();

    var field1 = new cfx.FieldMap();




    var field2 = new cfx.FieldMap();




    var field3 = new cfx.FieldMap();







    var panes = chart1.getPanes();

    var pane = new cfx.Pane();



    var seriesList = chart1.getSeries();

    var series0 = seriesList.getItem(0);

    var series1 = seriesList.getItem(1);



    // Setup Top Pane to start in break value




    // make sure both series have same color




    // Hide LargeValue from legend box

    chart1.getLegendBox().getItemAttributes().getItem(seriesList, 1).setVisible(false);


    // Hide LargeValue from tooltip

    // Also note that we have to make sure we do not show value 50 for big bars in the bottom pane

    var tipContentTemplate = '<DataTemplate>' +

                                '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                                  '<TextBlock Text="Value:" Margin=\"0,0,4,0\"/>' +

                                  '<TextBlock Text="{Binding Path=DataRealValue}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                                '</DockPanel>' +








Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...