lightweight-charts

I cant see more decimals in my lightweightchart


I created a chart, and i wanna show more decimals than just 2, but i tried every possible option, and its not working in my script, but when i tryit in a simple, new chart its working. What can couse the problem?

here is the chart:

var chart = LightweightCharts.createChart(chartElement, {
  autoSize: true,
  layout: {
    background: { color: "#1c1f2d" },
    textColor: "#C3BCDB",
  },
  grid: {
    vertLines: { color: "#444" },
    horzLines: { color: "#444" },
  },
  timeScale: {
    timeVisible: true,
    secondsVisibile: true,
  },

});

const currentLocale = window.navigator.languages[0];
chart.priceScale().applyOptions({
  borderColor: "#71649C",
});

// Setting the border color for the horizontal axis
chart.timeScale().applyOptions({
  borderColor: "#71649C",
});

// Adjust the starting bar width (essentially the horizontal zoom)
chart.timeScale().applyOptions({
  barSpacing: 10,
});

// Create a number format using Intl.NumberFormat
const myPriceFormatter = Intl.NumberFormat(currentLocale, {
  style: "currency",
  currency: "USD", // Currency for data points
  precision: 5,
  minMove: 0.00001 

}).format;

// Apply the custom priceFormatter to the chart
chart.applyOptions({
  localization: {
    priceFormatter: myPriceFormatter,
  },
});
// with this its doesnt work to
/* 
chart.applyOptions({
  priceFormat: {
    precision: 5
  }
})
*/
// Customizing the Crosshair
chart.applyOptions({
  crosshair: {
    // Change mode from default 'magnet' to 'normal'.
    // Allows the crosshair to move freely without snapping to datapoints
    mode: LightweightCharts.CrosshairMode.Normal,

    // Vertical crosshair line (showing Date in Label)
    vertLine: {
      width: 8,
      color: "#C3BCDB44",
      style: LightweightCharts.LineStyle.Solid,
      labelBackgroundColor: "#9B7DFF",
    },

    // Horizontal crosshair line (showing Price in Label)
    horzLine: {
      color: "#9B7DFF",
      labelBackgroundColor: "#9B7DFF",
    },
  },
});

here is a example of my data: { symbol: 'AAPL', time: 1693437554, open: 195.9721, high: 195.97464, low: 195.9721, close: 195.97464 }

I tried to remove everything what can interrupt the working of this, i tried to paste the code under the chart creation to.


Solution

  • You should set the price format on the series. See the types here: https://tradingview.github.io/lightweight-charts/docs/next/api/interfaces/SeriesOptionsCommon#priceformat)

    For example:

    var mainSeries = chart.addLineSeries({
        priceFormat: {
            minMove: 0.0001,
            precision: 4,
        },
    });