js, графики lightweight-charts

Я делаю график с помощью lightweight-charts. Пример данных: массив из объектов:

{
    "time": {
        "day": 12,
        "month": 3,
        "year": 2021
    },
    "value": 27
}

Но в итоге на графике, проценты идут 0, 500, 1000 и т.д. Почему так? React component:

export default class BigChart extends Component
{
  constructor(props)
  {
    super(props);

    this.mounted = false
  }

  getOptions(width, height)
  {
    return {
      width: width,
      height: height,
      priceScale: {
        scaleMargins: {
          top: 0.2,
          bottom: 0.2,
        },
        borderVisible: false,
        mode: 2
      },
      timeScale: {
        scaleMargins: {
          top: 0.2,
          bottom: 0.2,
        },
        borderVisible: false,
        mode: 2
      },
      layout: {
        backgroundColor: this.props.backgroundColor,
        textColor: '#fff',
      },
      grid: {
        horzLines: {
          color: false,
        },
        vertLines: {
          color: false,
        },
      },
    }
  }

  getRandomInt(min, max)
  {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  getContainer(width, height)
  {
    var container = document.createElement('div');

    var chart = createChart(container, this.getOptions(width, height));

    // chart.resize(height, width);

    var areaSeries = chart.addAreaSeries({
      symbol: '%',
      topColor: this.props.lineColor,
      lineColor: this.props.lineColor,
      bottomColor: 'transparent',
      lineWidth: 2,
    });

    let data = [];
    let startRange = moment();
    let endRange = moment();

    if(this.props.data.length > 0)
    {
      data.push({
        time: moment(this.props.data[0].date, "YYYY-MM-DD HH:mm:ss").subtract(1, 'days').format('YYYY-MM-DD'),
        value: 1
      })
    }

    this.props.data.map((item, i) => {
      if(i === 0)
      {
        startRange = moment(item.date, "YYYY-MM-DD HH:mm:ss");
      }

      if(i === this.props.data.length - 1)
      {
        endRange = moment(item.date, "YYYY-MM-DD HH:mm:ss");
      }
      
      data.push({
        time: moment(item.date, "YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
        value: item.bal
      });
    });

    chart.timeScale().setVisibleRange({
      from: startRange,
      to: endRange,
    });
    chart.timeScale().fitContent();

    areaSeries.setData(data);

    areaSeries.applyOptions({
      baseLineVisible: true,
      baseLineColor: '#ff0000',
      baseLineWidth: 3,
      baseLineStyle: 1,
    });

    return container;
  }

  render()
  {
    return <div style={{
      width: this.props.width,
      height: this.props.height + 'px',
    }} onClick={(e) => {
      if(typeof this.props.onClick !== 'undefined')
      {
        this.props.onClick(e);
      }
    }} ref={(nodeElement) => {

      if(this.mounted === false)
      {
        nodeElement.appendChild(this.getContainer(nodeElement.getBoundingClientRect().width, this.props.height));
        this.mounted = true;
      }

      return nodeElement;
    }}/>
  }
}