Selecting Between Linear and Log Scales in Charts — What Each Developer Ought to Know

Welcome to our “Weekly Knowledge Visualization” weblog collection!

Charts are important knowledge visualization instruments, and choosing the proper axis scale is essential for correct illustration and interpretation. By default, most charting libraries use a linear scale for numerical knowledge, the place values are evenly spaced. This method works effectively for datasets with a constant vary.

Nevertheless, when knowledge spans a number of orders of magnitude, a logarithmic scale turns into simpler. It compresses bigger values and expands smaller ones, making variations within the knowledge extra seen.

On this weblog, we’ll discover the variations between linear and logarithmic scales, their default habits, and the best way to implement them in charts, with sensible examples utilizing our Syncfusion^® Blazor Charts.

Understanding linear and logarithmic scales

1. Linear scale

A linear scale represents knowledge in equal intervals, the place every step on the axis corresponds to a hard and fast unit enhance. In a chart with a linear scale, the gap between 10 and 20 is similar as between 90 and 100. This scale is greatest fitted to datasets with a uniform knowledge distribution.

When to make use of a linear scale?

• Knowledge values are comparatively shut in vary (e.g., 10 to 100).
• Adjustments in knowledge are uniform or additive (e.g., income development of $100 per yr).
• Unfavorable and 0 values should be displayed, as log scales don’t assist them.

Instance: If you happen to’re plotting month-to-month gross sales income that grows constantly by $500, a linear scale successfully represents the pattern.

Let’s discover using a linear axis by visualizing the typical month-to-month temperatures in New York Metropolis, United States, with our Blazor Line Chart. This instance illustrates the best and lowest temperatures for every month.

To get began with the linear scale, consult with the numeric axis documentation.

In our Blazor Charts, the Y-axis defaults to a linear scale until a distinct scale sort is specified. To configure a linear scale, set the ValueType=”Double” within the ChartPrimaryYAxis.

Seek advice from the next code instance.

@utilizing Syncfusion.Blazor.Charts

<SfChart Title="Common Month-to-month Temperatures for New York Metropolis, United States">
    <ChartPrimaryXAxis Title="Months" ValueType="Syncfusion.Blazor.Charts.ValueType.Class" />
    <ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double" 
                       Title="Temperature (°C)" 
                       LabelFormat="{worth}°C" />
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="TemperatureData"
                     XName="Month"
                     YName="Temperature"
                     Fill="DodgerBlue"
                     Width="2"
                     Kind="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
            <ChartMarker Seen="true">
                <ChartDataLabel Seen="true"></ChartDataLabel>
            </ChartMarker>  
        </ChartSeries>        
    </ChartSeriesCollection>
</SfChart>

@code {  
    public class TemperatureRecord
    {
        public string Month { get; set; }
        public double Temperature { get; set; }
    }

    public Checklist<TemperatureRecord> TemperatureData { get; set; } = new Checklist<TemperatureRecord>
    {
        new TemperatureRecord { Month = "Jan", Temperature = 13.8 },
        new TemperatureRecord { Month = "Feb", Temperature = 16.5 },
        new TemperatureRecord { Month = "Mar", Temperature = 22.1 },
        new TemperatureRecord { Month = "Apr", Temperature = 28.7 },
        new TemperatureRecord { Month = "Could", Temperature = 32.8 },
        new TemperatureRecord { Month = "Jun", Temperature = 34.0 },
        new TemperatureRecord { Month = "Jul", Temperature = 30.9 },
        new TemperatureRecord { Month = "Aug", Temperature = 29.7 },
        new TemperatureRecord { Month = "Sep", Temperature = 29.0 },
        new TemperatureRecord { Month = "Oct", Temperature = 26.1 },
        new TemperatureRecord { Month = "Nov", Temperature = 20.5 },
        new TemperatureRecord { Month = "Dec", Temperature = 15.3 }
    };   
}

Seek advice from the next picture.

Notice: You may get the reference knowledge right here or view the stay demo for the Linear scale within the Blazor Charts.

2. Logarithmic scale

A logarithmic scale is used when knowledge varies exponentially, which means every step will increase by an element (e.g., 10, 100, 1000). This scale is beneficial for visualizing knowledge with giant variations or exponential development. For instance, a base-10 log scale may show values like 1, 10, 100, 1,000 as an alternative of 1, 2, 3, 4.

When to make use of a logarithmic scale?

• The information spans a number of orders of magnitude (e.g., 1 to 1,000,000).
• Relative change is extra necessary than absolute change.
• There’s exponential development or decay (e.g., inventory costs, inhabitants development, earthquake magnitudes).
• You might want to examine share modifications quite than absolute variations.

Instance: If you happen to’re plotting the market capitalization of corporations, the place some are value thousands and thousands and others trillions, a log scale helps keep visibility throughout all knowledge factors.

Let’s discover using a logarithmic axis by visualizing the exponential development of COVID-19 instances throughout the early phases of the pandemic. This method offers a clearer illustration of information that spans a number of orders of magnitude.

To get began with the logarithmic scale in Blazor Charts, consult with its documentation.

To allow a logarithmic axis in our Blazor Charts, set the ValueType=”Logarithmic” within the ChartPrimaryYAxis. By default, the logarithmic base (LogBase) is ready to 10.

Seek advice from the next code instance.

@utilizing Syncfusion.Blazor.Charts

<SfChart Title="Cumulative COVID-19 Circumstances Worldwide">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Class" 
                        Title="Months" />
    
    <ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" 
                        Title="Circumstances" />
    
    <ChartSeriesCollection>
        <ChartSeries DataSource="CovidCases"
                     XName="Date"
                     YName="Circumstances"
                     Fill="DodgerBlue"
                     Width="2"
                     Kind="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
            
            <ChartMarker Seen="true">
                <ChartDataLabel Seen="true"></ChartDataLabel>
            </ChartMarker>
        
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {  
    public class CovidData
    {
        public string Date { get; set; }
        public double Circumstances { get; set; }
    }

    public Checklist<CovidData> CovidCases { get; set; } = new Checklist<CovidData>
    {
        new CovidData { Date = "Jan 1, 2020", Circumstances = 27 },
        new CovidData { Date = "Feb 1, 2020", Circumstances = 11_953 },
        new CovidData { Date = "Mar 1, 2020", Circumstances = 87_137 },
        new CovidData { Date = "Apr 1, 2020", Circumstances = 862_234 },
        new CovidData { Date = "Could 1, 2020", Circumstances = 3_272_202 }
    };   
}

Seek advice from the next picture.

Notice: You may get the reference knowledge right here or view the stay demo for the logarithmic scale in Blazor Charts.

Key variations between linear and logarithmic scales

Choosing the proper scale

In case your knowledge reveals regular, predictable modifications, a linear scale is often the only option. Nevertheless, in case your knowledge varies considerably in magnitude or follows an exponential sample, a logarithmic scale can reveal tendencies that might in any other case be troublesome to see.

When designing charts, contemplate:

• The scale of the worth vary.
• Whether or not absolute or relative variations matter extra.
• If exponential development or decay is current.

Syncfusion Blazor parts might be reworked into beautiful and environment friendly net apps.

Attempt It Free

Conclusion

Thanks for studying! On this weblog, we now have seen key variations and the best way to use the linear and logarithmic scales for knowledge visualization utilizing our Syncfusion^® Blazor Charts. You too can discover our ⁠linear and logarithmic axes within the Blazor Charts demos. Attempt them out and go away your suggestions within the feedback part under!

The newest model of the Blazor Charts part is out there for present prospects from the License and Downloads web page. In case you are not but a buyer, attempt our 30-day free trial to test it out.

You too can contact us via our assist discussion board, assist portal, or suggestions portal. We’re at all times completely happy to help you!