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);
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.