I am using the [lightweight-charts] javascript library to generate some charts. For this example I am using the Realtime emulation chart.

In this example the background color is white. I would like to set the background color to black. I am following the documentation but I can't achieve the goal.

Following is the code I am using but it is not working:

var chart = LightweightCharts.createChart(document.getElementById('chart'), {
    width: 1200,
    height: 800,
    background: '#000000',
    textColor: '#ffffff'
});


var candleSeries = chart.addCandlestickSeries();
var data = [...]

What am I missing?

I am using the [lightweight-charts] javascript library to generate some charts. For this example I am using the Realtime emulation chart.

In this example the background color is white. I would like to set the background color to black. I am following the documentation but I can't achieve the goal.

Following is the code I am using but it is not working:

var chart = LightweightCharts.createChart(document.getElementById('chart'), {
    width: 1200,
    height: 800,
    background: '#000000',
    textColor: '#ffffff'
});


var candleSeries = chart.addCandlestickSeries();
var data = [...]

What am I missing?

• javascript
• lightweight-charts

1 Answer 1

You'll need to wrap both background & textColor within a layout property like

var chart = LightweightCharts.createChart(document.getElementById('chart'), {
  width: 1200,
  height: 800,
  layout: {
    background: {
      color: '#000000'
    },
    textColor: '#ffffff'
  }
});

as seen in this doc