Removing all axis lines in LightningChart Chart3D

Question

I'm using lcjs in a React sandbox app, trying to make a 3D bar chart that renders only the bars themselves. (The bars are hidden in the examples)

However, the API doc doesn't seem to give me a way of accessing all the lines drawn in the 3D canvas.

Here's the example with all the lines:

this.chart = lightningChart().Chart3D({ container: this.chartId });

This is the generated 3D view, with all the surrounding lines:

I was able to remove the Main Axes lines with this:

this.chart.forEachAxis((axis) => {
  axis.setStrokeStyle(emptyLine);
});

Notice how the main axes are now empty, but all the other "not default" ones are still there.

How would I go about hiding all of them and have the chart render without any axis line?

Answer 1

The bounding box line style can be edited by using a custom theme.

LightningChart JS exports customTheme function that can be used to create a new theme based on another theme. You can use that function to create a new theme with the bounding box lines set to emptyLine.

const myTheme = customTheme(Themes.dark, {
    boundingBoxStyle3D: emptyLine
})

Then when you create the 3D chart you can use the created theme as the theme the chart should use.

const chart3D = lightningChart().Chart3D({
    theme: myTheme
})

See below for a working example.

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    SolidLine,
    Themes,
    customTheme,
    emptyLine,
    emptyTick
} = lcjs

// Create custom theme based on the dark theme and edit the boundingBoxStyle3D property to be emptyLine to hide the bounding box lines
const myTheme = customTheme(Themes.dark, {
    boundingBoxStyle3D: emptyLine
})

// Initiate chart
const chart3D = lightningChart().Chart3D({
    theme: myTheme
})

// Set Axis titles
chart3D.getDefaultAxisX()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)
chart3D.getDefaultAxisY()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)
chart3D.getDefaultAxisZ()
    .setTickStrategy("Empty")
    .setStrokeStyle(emptyLine)

<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>