JavaScript Symlog Scale Line Chart

This example showcases the creation of a symmetric logarithmic (symlog) chart. It is a combination of a positive logarithmic axis, a linear axis, and a negative logarithmic axis. This specialized chart type is particularly useful for datasets that span massive magnitudes in both positive and negative directions, as a standard logarithmic scale cannot gracefully handle zero or negative values.

Because the chart utilizes three physically separate axes, the data must be sorted and routed into three distinct line series based on a defined linear threshold (e.g., -10 to 10).

The layout is achieved by utilizing the iStack property, which stacks the independent axes on top of each other. Logarithmic axes are created by supplying the type: 'logarithmic' argument when the Axis is created. The linear axis is configured to occupy significantly less vertical space than the logarithmic axes with the setLength method:

// Remove the default Y axis
chart.axisY.dispose()
// Positive logarithmic axis (Top)
const yAxisLogPositive = chart.addAxisY({ iStack: 1, type: 'logarithmic', base: 10 })
// Linear axis for the zero-crossing (Middle)
const yAxisLinear = chart.addAxisY({ iStack: 0, type: 'linear' })
// Negative logarithmic axis (Bottom)
const yAxisLogNegative = chart.addAxisY({ iStack: -1, type: 'logarithmic', base: 10 })

// Axis.setLength can be used to tweak the visual axis ratios
yAxisLogPositive.setLength({ relative: 5 })
yAxisLinear.setLength({ relative: 2 })
yAxisLogNegative.setLength({ relative: 5 })