LogarithmicAxis3D

The LogarithmicAxis3D is a 3D axis type where tick values increase exponentially. It is the 3D counterpart of the 2D LogarithmicAxis, and is ideal when your data spans several orders of magnitude, such as signal magnitudes, power levels, or frequency response data.

Plotting data on a logarithmic axis is equivalent to plotting the log of the data. For example, with the default logBase: 10 the axis ticks will appear at 0.01, 0.1, 1, 10, 100, 1000. With logBase: 2 they would appear at 2, 4, 8, 16, 32.

note

Data must be strictly positive. A LogarithmicAxis3D cannot render values that are zero or negative. Clamp your data to a small positive minimum (e.g. 0.01) before plotting.

Create and Configure a LogarithmicAxis3D

To use LogarithmicAxis3D, import it from scichart and assign it to one of the xAxis, yAxis or zAxis properties on SciChart3DSurface📘.

import { SciChart3DSurface, LogarithmicAxis3D, NumericAxis3D, NumberRange } from "scichart";

const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId);

// Assign a LogarithmicAxis3D to the Y axis
sciChart3DSurface.yAxis = new LogarithmicAxis3D(wasmContext, {
    axisTitle: "Magnitude (log10)",
    logBase: 10,
    visibleRange: new NumberRange(0.05, 200)
});

// Other axes can remain linear
sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "Frequency (Hz)" });
sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Slice" });

The logBase Property

The logBase property controls the base of the logarithmic scale:

logBase	Tick values
10 (default)	0.01, 0.1, 1, 10, 100, 1000
2	2, 4, 8, 16, 32, 64
Math.E	Natural log (e, e², e³, …)

// Base-10 (default) - useful for scientific/engineering data
sciChart3DSurface.yAxis = new LogarithmicAxis3D(wasmContext, { logBase: 10 });

// Base-2 - useful for octave-spaced audio or binary data
sciChart3DSurface.yAxis = new LogarithmicAxis3D(wasmContext, { logBase: 2 });

Full Example - 3D Spectral Waterfall with Log Magnitude Axis

The example below shows a spectral waterfall chart: 50 time-domain spectrum slices plotted as 3D line series, with the Y axis (magnitude) rendered on a base-10 logarithmic scale. The data spans from near-zero noise floor values (~0.05) up to peak magnitudes (~80), covering more than three orders of magnitude — a range that benefits greatly from a log scale.

You will find the full code here.

TS

import {
    SciChart3DSurface,
    NumericAxis3D,
    LogarithmicAxis3D,
    Vector3,
    NumberRange,
    SciChartJsNavyTheme,
    XyzDataSeries3D,
    PointLineRenderableSeries3D,
    MouseWheelZoomModifier3D,
    OrbitModifier3D,
    ResetCamera3DModifier
} from "scichart";

async function logarithmicAxis3D(divElementId) {
    // Demonstrates how to create a 3D chart with a LogarithmicAxis3D on the Y axis
    const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId, {
        theme: new SciChartJsNavyTheme(),
        worldDimensions: new Vector3(300, 200, 300),
        cameraOptions: {
            position: new Vector3(-250, 180, -250),
            target: new Vector3(0, 50, 0)
        }
    });

    // X axis: linear frequency axis
    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Frequency (Hz)",
        visibleRange: new NumberRange(0, 299),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10
    });

    // Y axis: LogarithmicAxis3D - data spans several orders of magnitude
    // Values must be strictly positive; logBase defaults to 10
    sciChart3DSurface.yAxis = new LogarithmicAxis3D(wasmContext, {
        axisTitle: "Magnitude (log10)",
        logBase: 10,
        visibleRange: new NumberRange(0.05, 200),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10
    });

    // Z axis: linear slice/time axis
    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Slice",
        visibleRange: new NumberRange(0, 49),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10
    });

    // Generate synthetic spectral data: 50 slices, 300 points each
    const SERIES_COUNT = 50;
    const POINTS_PER_SERIES = 300;

    for (let i = 0; i < SERIES_COUNT; i++) {
        const xValues = new Array(POINTS_PER_SERIES);
        const yValues = new Array(POINTS_PER_SERIES);
        const zValues = new Array(POINTS_PER_SERIES).fill(i);

        for (let j = 0; j < POINTS_PER_SERIES; j++) {
            const peak1 = 80 * Math.exp(-Math.pow((j - (30 + i * 0.2)) / 8, 2));
            const peak2 = 40 * Math.exp(-Math.pow((j - (90 + i * 0.1)) / 12, 2));
            const peak3 = 25 * Math.exp(-Math.pow((j - (180 - i * 0.15)) / 16, 2));
            xValues[j] = j;
            // Clamp to a small positive minimum - LogarithmicAxis3D requires strictly positive values
            yValues[j] = Math.max(peak1 + peak2 + peak3 + 0.05 + Math.random() * 0.4, 0.05);
        }

        const t = i / (SERIES_COUNT - 1);
        const stroke = `rgb(${Math.round(40 + t * 215)}, ${Math.round(120 + (1 - Math.abs(t - 0.5) * 2) * 90)}, ${Math.round(228 - t * 160)})`;

        sciChart3DSurface.renderableSeries.add(new PointLineRenderableSeries3D(wasmContext, {
            dataSeries: new XyzDataSeries3D(wasmContext, { xValues, yValues, zValues }),
            stroke,
            strokeThickness: 2,
            isLineStrip: true,
            opacity: 0.9
        }));
    }

    sciChart3DSurface.chartModifiers.add(
        new MouseWheelZoomModifier3D(),
        new OrbitModifier3D(),
        new ResetCamera3DModifier()
    );
}

logarithmicAxis3D("scichart-root");

HTML

<div class="wrapper">
    <div id="scichart-root" ></div>
    <div class="titleWrapper">
        <p class="title">SciChart.js 3D Chart Example</p>
        <p class="subTitle">LogarithmicAxis3D - multi-order magnitude Y axis</p>
    </div>
</div>

CSS

body {
    margin: 0;
    font-family: Arial;
}
.wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
}
#scichart-root {
    width: 100%;
    height: 100%;
    position: relative;
}
.titleWrapper {
    position: absolute;
    width: 100%;
    top: 35%;
    text-align: center;
    pointer-events: none;
    color: #ffffff77;
}
.title {
    font-size: 20px;
}
.subTitle {
    font-size: 16px;
}

Inherited Properties from AxisBase3D

LogarithmicAxis3D inherits from AxisBase3D📘 and supports all the same styling and configuration options as NumericAxis3D, including:

• axisTitle, titleOffset, tickLabelsOffset
• visibleRange, autoRange, growBy
• drawMajorGridLines, drawMinorGridLines, drawLabels
• maxAutoTicks, labelFormat, labelPrecision
• axisPlaneBackgroundFill, planeBorderColor, planeBorderThickness

See the Axis3D APIs Overview for a full reference of inherited properties.

See Also

• LogarithmicAxis (2D) — covers logBase, minorTickMode, majorTickMode, label formatting and negative number handling in more depth
• NumericAxis3D — the standard linear value axis for 3D charts
• Axis3D APIs Overview
• Axis3D Text Label Formatting
• Axis3D Gridline and Label Spacing