Search code examples
anychart

Stock Chart values on the y axis are being rounded


I have a chart that I am displaying but the values on the y axis are being rounded to 1 decimal place but I would like for it to go to 2 decimal places. The data being fed into the chart has 6 decimal places as you can see in the legend when you hover over different parts of the chart. How do I keep it from rounding or specifying the number of decimals to round to? I have included a sample of the data because the full set is over a 1000 lines long. The full data set is in the codepen.

Thanks

https://codepen.io/akrug23/pen/dyXjYdO

let data = {
  count: 226,
  results: [
    { date: "2019-12-12", nav_code: "2039", amount: "10.000000", change: 0 },
    { date: "2019-12-13", nav_code: "2039", amount: "10.000000", change: 0 },
    {
      date: "2019-12-16",
      nav_code: "2039",
      amount: "10.208000",
      change: 2.037618
    },
    {
      date: "2019-12-17",
      nav_code: "2039",
      amount: "10.236000",
      change: 2.305588
    },
    {
      date: "2019-12-18",
      nav_code: "2039",
      amount: "10.248000",
      change: 2.419984
    },
    {
      date: "2019-12-19",
      nav_code: "2039",
      amount: "10.264000",
      change: 2.572097
    },
    {
      date: "2019-12-20",
      nav_code: "2039",
      amount: "10.284000",
      change: 2.761571
    },
    {
      date: "2019-12-23",
      nav_code: "2039",
      amount: "10.292000",
      change: 2.837155
    },
    {
      date: "2019-12-24",
      nav_code: "2039",
      amount: "10.292000",
      change: 2.837155
    },
    {
      date: "2019-12-26",
      nav_code: "2039",
      amount: "10.312000",
      change: 3.025601
    },
    {
      date: "2019-12-27",
      nav_code: "2039",
      amount: "10.324000",
      change: 3.138318
    },
    {
      date: "2019-12-30",
      nav_code: "2039",
      amount: "10.300000",
      change: 2.912621
    },
    {
      date: "2019-12-31",
      nav_code: "2039",
      amount: "10.316000",
      change: 3.063203
    },
    {
      date: "2020-01-02",
      nav_code: "2039",
      amount: "10.368000",
      change: 3.549383
    },
    {
      date: "2020-01-03",
      nav_code: "2039",
      amount: "10.350799",
      change: 3.389101
    },
    {
      date: "2020-01-06",
      nav_code: "2039",
      amount: "10.339216",
      change: 3.280868
    },
    {
      date: "2020-01-07",
      nav_code: "2039",
      amount: "10.328300",
      change: 3.178645
    },
    {
      date: "2020-01-08",
      nav_code: "2039",
      amount: "10.339970",
      change: 3.287921
    },
    {
      date: "2020-01-09",
      nav_code: "2039",
      amount: "10.386636",
      change: 3.722437
     }
  ]
};

function createStockChart(chartContainerID, rangeContainerID, data) {
  var percentageChange = anychart.data.table("date");
  percentageChange.addData(data);

  var navs = anychart.data.table("date");
  navs.addData(data);

  // Init stock chart
  var chart = anychart.stock();

  //Set animations
  chart.animation(true, 5000);

  //Remove the credits
  chart.credits().enabled(false);

  //Set chart settings
  var plot = chart.plot();
  plot
    .line()
    .data(
      percentageChange.mapAs({
        value: "change"
      })
    )
    .name("% Change")
    .fill("#99328e")
    .stroke("#99328e")
    .tooltip(false);
  
  plot.yAxis().labels().format(function() {
    return this.value.toFixed(2);
  });

  chart.crosshair(true);
  chart.crosshair().yLabel().format(function() {
    return this.value.toFixed(2);
  });
  
  
  //format the legend
  var legend = plot.legend();

  //enable legend
  legend.enabled(true);

  //remove the title
  legend.titleFormat(false);

  //format item in legend
  legend.useHtml(true);
  legend.itemsFormat("% Change: {%value}");

  //Disable the scroller
  chart.scroller().enabled(false);

  //Set container for chart and draw chart
  chart.container(chartContainerID);
  chart.draw();
}

createStockChart("stock-chart", "stock-chart-range-selector", data.results);

Solution

  • Ok, got it! In the context of the crosshair label formatter you can find rawValue field that includes not rounded value. You should use it for this purpose, instead of value field. Like this:

    chart.crosshair().yLabel().format(function() {
      console.log(this.rawValue);
      return this.rawValue;
    });
    

    So, you can round or format the raw value exactly as you need.