Chart for .NET / User's Guide / Axes / Scale / Scale Configurators / Scale Breaks

In This Topic
    Scale Breaks
    In This Topic

    Scale breaks allow you to skip a range of data on the axis thereby increasing the visual space available for the data that falls outside this range. This feature is most commonly used in the following cases: 

    Nevron Chart has complete support for scale breaks on all types of axes (horizontal, vertical, depth, reversed, date time etc.) in both 2D and 3D mode and allows you to have full control over the scale break position and style.

    Each axis scale can contain an unlimited number of scale breaks, which are created by adding instances of NScaleBreak derived classes as shown by the following table:

     

    Type

    Description

    NAutoScaleBreak

    Represents one or more scale breaks dynamically introduced to the scale if data displayed on it varies in magnitude above a specified threshold value.

    NCustomScaleBreak

    Represents a custom defined scale break that will effectively skip the specified range of the data from the scale.

     Automatic Scale Breaks

    Automatic scale breaks will appear on the scale only if the data displayed on the axis contains large gaps. For example consider the following charts:

    1. Chart with data that is regularly distributed over the scale range



    2. Chart with data which is located in the range [0, 1] and [9, 9.5]



      The effect of peak data is that it greatly increases the scale range of the axis (in the above case the Y axis), which in turn decreases the amount of space available for data whose values don’t vary greatly (in the above case these are the values in the range [0, 1]. This effect reduces the readability of the chart since you cannot visually distinguish the difference between the data in the small range.   

      To solve this problem you may want to introduce an automatic scale break that will appear when the data contains peaks. In order to do so you need to create an object of type NAutoScaleBreak and add it to the ScaleBreaks collection property of the scale configurator associated with the axis. The following code snippet shows how to achieve this:

      C#
      Copy Code
      NChart chart = (NChart)nChartControl1.Charts[0];
      NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
      
      NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
      scale.ScaleBreaks.Add(new NAutoScaleBreak());
      
      Visual Basic
      Copy Code
      Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
      Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
      
      Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
      scale.ScaleBreaks.Add(New NAutoScaleBreak())
      
      This will produce the following chart:



      Note that now it’s much easier to distinguish the differences in the data contained in the range [0.2, 1], because the chart has allocated more visual space to it at the expense of the data in the range [1, 9].
     Threshold Factor

    The ThresholdFactor property of the NAutoScaleBreak class allows you to control when scale breaks will appear. The threshold is calculated as follows:

    threshold = DataGapRangeLength / DataRangeLength

    In the case of the above chart the gap in data occurs from [1, 9] (there is no data in that range) and the data range is [0.2, 9.5] (all data is contained in this range). Therefore the threshold is:


    8 / 9.3 = 0.96

     

    By default the automatic scale break will be displayed when the threshold is above 0.4 and this is why the scale break will appear given the above data set. To following code shows how to change the value of this property:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NAutoScaleBreak autoScaleBreak = new NAutoScaleBreak();
    autoScaleBreak.ThresholdFactor = 0.8f;
    scale.ScaleBreaks.Add(autoScaleBreak);
    
    Visual Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    Dim autoScaleBreak As New NAutoScaleBreak()
    autoScaleBreak.ThresholdFactor = 0.8F
    scale.ScaleBreaks.Add(autoScaleBreak)
    
     Auto Scale Break Count

    When the threshold value is small you may have several gaps in data that satisfy the specified threshold. In this case the automatic scale break will create scale breaks starting from the biggest gap until the number of scale breaks reaches the MaxScaleBreakCount property of the NAutoScaleBreak class or there are no more gaps that satisfy the threshold factor. The following pictures show how a chart will behave when this property is set to to 3:

    Original Chart

     

    The same chart with three scale breaks

     

     Custom Scale Breaks

    In some cases you may want to manually add scale breaks to the axis scale. This is done by creating and instance of the NCustomScaleBreak and adding it to the ScaleBreaks collection of the scale configurator:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NCustomScaleBreak customScaleBreak = new NCustomScaleBreak(new NRange1DD(15, 25));
    scale.ScaleBreaks.Add(customScaleBreak);
    
    Visual Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    Dim customScaleBreak As NCustomScaleBreak = New NCustomScaleBreak(New NRange1DD(15, 25))
    scale.ScaleBreaks.Add(customScaleBreak)
    
     Scale Break Position

    Each scale break (be it custom or automatic) has a property called Position which accepts object derived from the abstract NScaleBreakPosition class. This feature allows you to control where the scale break will appear on the scale. The following table shows the possible options for this property:

    Class

    Description

    NPercentScaleBreakPosition

    Represents a scale break position which is determined in percentages relative to the scale being split by the scale break.

    NRangeScaleBreakPosition

    Represents a scale break position which is determined relative to the range of the scale break on the scale.

    NContentScaleBreakPosition

    Represents a scale break position, which is determined according to the amount of data left on the sides of the scale break.

     Percent Scale Break Position

    The percent scale break position allows you to place the scale break at a specified percent value of the scale segment it splits. For example when you use the following code:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NCustomScaleBreak customScaleBreak = new NCustomScaleBreak(new NRange1DD(15, 25));
    customScaleBreak.Position = new NPercentScaleBreakPosition(50);
    scale.ScaleBreaks.Add(customScaleBreak);
    
    Visual Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    Dim customScaleBreak As NCustomScaleBreak = New NCustomScaleBreak(New NRange1DD(15, 25))
    customScaleBreak.Position = New NPercentScaleBreakPosition(50)
    scale.ScaleBreaks.Add(customScaleBreak)
    

    The scale break will be placed at the middle of the chart axis. The following picture shows what happens when you have two scale breaks each positioned at 50% of the scale segment they split respectively:

     Range Scale Break Position

    In some cases you may want to position the scale break at the place of the range of data it skips so that the user has better visual comprehension of the relative position of the skipped range. In this case you should assign a NRangeScaleBreakPosition object to the Position property:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NCustomScaleBreak customScaleBreak = new NCustomScaleBreak(new NRange1DD(15, 25));
    customScaleBreak.Position = new NRangeScaleBreakPosition();
    scale.ScaleBreaks.Add(customScaleBreak);
    
    Visual Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    
    Dim customScaleBreak As NCustomScaleBreak = New NCustomScaleBreak(New NRange1DD(15, 25))
    customScaleBreak.Position = New NRangeScaleBreakPosition()
    scale.ScaleBreaks.Add(customScaleBreak)
    

    The following picture shows the same chart as with the percent scale break position, except that the scale breaks use range positioning:

      

    Notice that this time you can visually distinguish how the ranges of important data relate to each other at the expense of the visual space associated with the first two ranges, which get smaller and as a consequence the data contained in them is less readable.

     Content Scale Break Position

    Finally you can let the control to determine how the scale break will split the axis based on the amount of data contained within the ranges that fall outside the scale break. This allows you to allocate more visual space for the ranges that contain more data at the expense of the ranges of data that contain less. The following shows a scale break which is slightly offset to the bottom of the Y axis because the data shown in the range [0, 20] is less than the one shown in the range [200, 700].  

     

     Scale Break Inflate

    When using scale breaks it is often useful to have some means to instruct the control to slightly inflate the ranges that fall on the left and right sides of the break. This is useful when you want to avoid cutting of the data as shown on the following image:

     

      

     

    The above image shows an automatic scale break which is introduced in the range [20, 60]. The readability of this chart image is not good as the bars at 20 and 60 fall exactly on the scale break borders. To improve the image you may consider to inflate the ranges [0, 20] and [60, 68] in order to better accumulate the bars at values 20 and 60:

     

     

     

    The above image shows a scale break with 10 percent left and right inflate which will shift the range [0, 20] to [0, 22] and the range [60, 68] to [54, 68] or in other words inflate the values of the ranges that are adjacent to the scale break with 10 percent of their length if possible. The following snippet shows how to do this from code:

    C#
    Copy Code
    scaleBreak.Inflate = new NRelativeScaleBreakInflate(10, 10);
    
    Visual Basic
    Copy Code
    scaleBreak.Inflate = New NRelativeScaleBreakInflate(10, 10)
    

    You can also use absolute inflate which to be applied to the adjacent ranges:

    C#
    Copy Code
    scaleBreak.Inflate = new NAbsoluteScaleBreakInflate(10, 10);
    
    Visual Basic
    Copy Code
    scaleBreak.Inflate = New NAbsoluteScaleBreakInflate(10, 10)
    

    In this case the ranges [0, 20] and [60, 68] will be shifted to [0, 30] and [50, 68] respectively. 

    By default automatic scale breaks are configured with ten percent relative inflate and custom scale breaks have no inflate.

     Scale Break Style

    Each scale break has a property called Style that accepts objects derived from NScaleBreakStyle and allow you to control the appearance of the scale break on the axis. The following table shows the possible options:

     

    Type

    Description

    NLineScaleBreakStyle

    Represents a scale break that is visualized as two parallel, straight lines

    NWaveScaleBreakStyle

    Represents a scale break that is visualized as a wave

    NZigZagScaleBreakStyle

    Represents a zig zag scale break

     

    All classes derive from the abstract NScaleBreakStyle class that allows you to modify the stroke and filling of a scale break. The following code snippet shows how to create a custom scale break at range [15, 25] and change its stroke and fill styles:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NCustomScaleBreak customScaleBreak = new NCustomScaleBreak(new NRange1DD(15, 25));
    customScaleBreak.Style.FillStyle = new NColorFillStyle(Color.Blue);
    customScaleBreak.Style.StrokeStyle.Color = Color.DarkBlue;
    scale.ScaleBreaks.Add(customScaleBreak);
    
    Visual Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    Dim customScaleBreak As New NCustomScaleBreak(New NRange1DD(15, 25))
    customScaleBreak.Style.FillStyle = New NColorFillStyle(Color.Blue)
    customScaleBreak.Style.StrokeStyle.Color = Color.DarkBlue
    scale.ScaleBreaks.Add(customScaleBreak)
    

    The wave and zig zag scale break styles also allow you to change the pattern of the wave / zig zag respectively. The following code shows how to create a custom scale break with wave style using the free hand wave pattern:

    C#
    Copy Code
    NChart chart = (NChart)nChartControl1.Charts[0];
    NAxis axis = chart.Axis((int)StandardAxis.PrimaryY);
    
    NStandardScaleConfigurator scale = axis.ScaleConfigurator as NStandardScaleConfigurator;
    NCustomScaleBreak customScaleBreak = new NCustomScaleBreak(new NRange1DD(15, 25));
    NWaveScaleBreakStyle waveStyle = new NWaveScaleBreakStyle();
    waveStyle.Pattern = ScaleBreakPattern.FreeHand;
    customScaleBreak.Style = waveStyle;
    scale.ScaleBreaks.Add(customScaleBreak);
    
    Visual  Basic
    Copy Code
    Dim chart As NChart = CType(NChartControl1.Charts(0), NChart)
    Dim axis As NAxis = chart.Axis(CType(StandardAxis.PrimaryY, Integer))
    
    Dim scale As NStandardScaleConfigurator = CType(axis.ScaleConfigurator, NStandardScaleConfigurator)
    Dim customScaleBreak As New NCustomScaleBreak(New NRange1DD(15, 25))
    Dim waveStyle As New NWaveScaleBreakStyle()
    waveStyle.Pattern = ScaleBreakPattern.FreeHand
    customScaleBreak.Style = waveStyle
    scale.ScaleBreaks.Add(customScaleBreak)
    
    See Also