CODEWITHSUNDEEP
lightningchart
Gracie williams
Gracie williams

Reputation: 1145

Remove padding around lightningChart

I want to remove all the unnecessary space around chart even if it very small , So I tried this code

chart[0].setPadding({ bottom: 0,left:-5 ,right:-5,top:0});
chart[1].setPadding({ bottom: -5,left:-5 ,right:-5,top:0});

Still I get some space in top and bottom , please see the screenshot

enter image description here

Upvotes: 1

Views: 224

Answers (1)

Snekw
Snekw

Reputation: 2620

Assuming that the screenshot is of a single dashboard. Then that line would be a dashboard splitter. You can remove it by setting the splitter style of dashboard to emptyFill with dashboard.setSplitterStyle

dashboard.setSplitterStyle(emptyFill)

That will remove the splitter line and let the charts to use the space it was using.

To get a chart with absolutely no unnecessary space around the chart, you will need to set:

  • chart title fill style to emptyFill
  • chart padding to 0
  • all axis tick styles to emptyTick
  • all axis stroke styles to emptyLine
  • all axis nib styles to emptyLine
  • dashboard splitter style to emptyLine
  • dashboard background stroke style to emptyLine

See the example below for how that would look like.

const {
    lightningChart,
    emptyLine,
    emptyTick,
    emptyFill
} = lcjs

const db = lightningChart().Dashboard({
    numberOfColumns: 1,
    numberOfRows: 2
})

const c1 = db.createChartXY({
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 0,
    rowSpan: 1
})
const c2 = db.createChartXY({
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 1,
    rowSpan: 1
})


const data = Array.from(Array(10)).map((_, i) => ({ x: i, y: Math.random() }))

const ser1 = c1.addLineSeries()
    .add(data)

const ser2 = c2.addLineSeries()
    .add(data.map((p) => ({ x: p.x, y: -p.y })))

// Hide titles and remove padding from chart
c1
    .setTitleFillStyle(emptyFill)
    .setPadding(0)
c2
    .setTitleFillStyle(emptyFill)
    .setPadding(0)

// Hide axis ticks, line and nibs
c1.getDefaultAxisX()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c1.getDefaultAxisY()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c2.getDefaultAxisX()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)
c2.getDefaultAxisY()
    .setTickStyle(emptyTick)
    .setStrokeStyle(emptyLine)
    .setNibStyle(emptyLine)

// Hide dashboard splitter and remove background stroke style.
db
    .setSplitterStyle(emptyLine)
    .setBackgroundStrokeStyle(emptyLine)
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 2

Related Questions