How to use the highcharts/highstock.numberFormat function in highcharts
To help you get started, we’ve selected a few highcharts examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bitshares / bitshares-ui / web / app / components / Exchange / PriceChart.jsx View on Github 
let price_dec = base.get("precision");
let vol_dec = quote.get("precision");
let time = Highcharts.dateFormat("%Y-%m-%d %H:%M", this.x);
if (!this.points || this.points.length === 0) {
return "";
}
let TA = (this.points[1] && "indicators" in this.points[1]) ? reduce(this.points[1].indicators, (finalString, indicator, key) => {
return finalString + "<b>" + key.toUpperCase() + "</b>" + ": " + Highcharts.numberFormat(indicator[1], price_dec, ".", ",") + " ";
}, "") : "";
return ("<span style="color: " + colors[theme].tooltipColor +";fill: "+ colors[theme].tooltipFillColor + "">" +
"<b>Open: </b>" + Highcharts.numberFormat(this.points[1].point.open, price_dec, ".", ",") +
"<b> High: </b>" + Highcharts.numberFormat(this.points[1].point.high, price_dec, ".", ",") +
"<b> Time: </b>" + time +
"<br><b>Close: </b>" + Highcharts.numberFormat(this.points[1].point.close, price_dec, ".", ",") +
"<b> Low: </b>" + Highcharts.numberFormat(this.points[1].point.low, price_dec, ".", ",") +
"<b> Vol: </b>" + Highcharts.numberFormat(this.points[1] ? this.points[0].point.y : 0, vol_dec, ".", ",") + " " + quoteSymbol + "<br>"
+ TA + "</span>");
},
positioner: function () {let TA = (this.points[1] && "indicators" in this.points[1]) ? reduce(this.points[1].indicators, (finalString, indicator, key) => {
return finalString + "<b>" + key.toUpperCase() + "</b>" + ": " + Highcharts.numberFormat(indicator[1], price_dec, ".", ",") + " ";
}, "") : "";if (!this.points || this.points.length === 0) {
return "";
}
let TA = (this.points[1] && "indicators" in this.points[1]) ? reduce(this.points[1].indicators, (finalString, indicator, key) => {
return finalString + "<b>" + key.toUpperCase() + "</b>" + ": " + Highcharts.numberFormat(indicator[1], price_dec, ".", ",") + " ";
}, "") : "";
return ("<span style="color: " + colors[theme].tooltipColor +";fill: "+ colors[theme].tooltipFillColor + "">" +
"<b>Open: </b>" + Highcharts.numberFormat(this.points[1].point.open, price_dec, ".", ",") +
"<b> High: </b>" + Highcharts.numberFormat(this.points[1].point.high, price_dec, ".", ",") +
"<b> Time: </b>" + time +
"<br><b>Close: </b>" + Highcharts.numberFormat(this.points[1].point.close, price_dec, ".", ",") +
"<b> Low: </b>" + Highcharts.numberFormat(this.points[1].point.low, price_dec, ".", ",") +
"<b> Vol: </b>" + Highcharts.numberFormat(this.points[1] ? this.points[0].point.y : 0, vol_dec, ".", ",") + " " + quoteSymbol + "<br>"
+ TA + "</span>");
},
positioner: function () {if (!this.points || this.points.length === 0) {
return "";
}
let TA = (this.points[1] && "indicators" in this.points[1]) ? reduce(this.points[1].indicators, (finalString, indicator, key) => {
return finalString + "<b>" + key.toUpperCase() + "</b>" + ": " + Highcharts.numberFormat(indicator[1], price_dec, ".", ",") + " ";
}, "") : "";
return ("<span style="color: " + colors[theme].tooltipColor +";fill: "+ colors[theme].tooltipFillColor + "">" +
"<b>Open: </b>" + Highcharts.numberFormat(this.points[1].point.open, price_dec, ".", ",") +
"<b> High: </b>" + Highcharts.numberFormat(this.points[1].point.high, price_dec, ".", ",") +
"<b> Time: </b>" + time +
"<br><b>Close: </b>" + Highcharts.numberFormat(this.points[1].point.close, price_dec, ".", ",") +
"<b> Low: </b>" + Highcharts.numberFormat(this.points[1].point.low, price_dec, ".", ",") +
"<b> Vol: </b>" + Highcharts.numberFormat(this.points[1] ? this.points[0].point.y : 0, vol_dec, ".", ",") + " " + quoteSymbol + "<br>"
+ TA + "</span>");
},
positioner: function () {"<br><b>Close: </b>" +
Highcharts.numberFormat(
this.points[1].point.close,
price_dec,
".",
","
) +
"<b> Low: </b>" +
Highcharts.numberFormat(
this.points[1].point.low,
price_dec,
".",
","
) +
"<b> Vol: </b>" +
Highcharts.numberFormat(
this.points[1] ? this.points[0].point.y : 0,
vol_dec,
".",
","
) +
" " +
quoteSymbol +
"<br>" +
TA +
""
);
},
positioner: function() {(finalString, indicator, key) => {
return (
finalString +
"<b>" +
key.toUpperCase() +
"</b>" +
": " +
Highcharts.numberFormat(
indicator[1],
price_dec,
".",
","
) +
" "
);
},
"") +
" "
);
},
""
)
: "";
return (
"<span style="color: " +
colors[theme].tooltipColor +
";fill: " +
colors[theme].tooltipFillColor +
"">" +
"<b>Open: </b>" +
Highcharts.numberFormat(
this.points[1].point.open,
price_dec,
".",
","
) +
"<b> High: </b>" +
Highcharts.numberFormat(
this.points[1].point.high,
price_dec,
".",
","
) +
"<b> Time: </b>" +
time +
"<br><b>Close: </b>" +
Highcharts.numberFormat(</span>return (
"<span style="color: " +
colors[theme].tooltipColor +
";fill: " +
colors[theme].tooltipFillColor +
"">" +
"<b>Open: </b>" +
Highcharts.numberFormat(
this.points[1].point.open,
price_dec,
".",
","
) +
"<b> High: </b>" +
Highcharts.numberFormat(
this.points[1].point.high,
price_dec,
".",
","
) +
"<b> Time: </b>" +
time +
"<br><b>Close: </b>" +
Highcharts.numberFormat(
this.points[1].point.close,
price_dec,
".",
","
) +
"<b> Low: </b>" +
Highcharts.numberFormat(</span>formatter: function () {
var s;
var points = this.points;
var pointsLength = points.length;
s = ''
for (let index = 0; index < pointsLength; index += 1) {
s += '' +
''
}
s += '<table style="border: 0px;padding-left:10px;padding-right:10px" class="tableformat"><tbody><tr><td style="padding-bottom:5px;" colspan="2"><span style="font-size: 10px;"> ' + moment(points[0].x).format("YYYY-MM-DD") + '</span><br></td></tr><tr><td valign="top" style="padding-top:4px;padding-bottom:4px;border-top:1px solid #D5D8DC;">' + '<span style="color:' + points[index].series.color + ';font-size: 15px !important;">\u25A0</span> ' + intl.formatMessage({id: points[index].series.name })+ '</td><td style="padding-top:5px;padding-left:10px;padding-bottom:4px;border-top:1px solid #D5D8DC;" align="right"><span><b style="color:#C23631">' +
(points[index].series.name == intl.formatMessage({id: 'freezing_column_freezing_rate'}) ? Highcharts.numberFormat(points[index].y, 2, '.', ',') + ' %</b>' : points[index].series.name == intl.formatMessage({id: 'freezing_column_total_circulation'}) ? toThousands((new BigNumber(points[index].y)).decimalPlaces(6)) + '':Highcharts.numberFormat(points[index].y, 0, '.', ',') + '')
+ '</span>' +
'</td></tr></tbody></table>';
return s;
},formatter: function() {
if (this.value !== 0) {
if ( this.value > 1000000 ) {
return Highcharts.numberFormat( this.value / 1000, 2) + "M";
} else if ( this.value > 1000 ) {
return Highcharts.numberFormat( this.value / 1000, 1) + "k";
} else {
return this.value;
}
} else {
return null;
}
}
},
Popular highcharts functions
- highcharts.addEvent
- highcharts.Chart
- highcharts.chart
- highcharts.charts
- highcharts.Color
- highcharts.dateFormat
- highcharts.getOptions
- highcharts.numberFormat
- highcharts.setOptions
- highcharts.theme
- highcharts/highcharts-3d
- highcharts/highcharts-more
- highcharts/highstock.chart
- highcharts/highstock.numberFormat
- highcharts/highstock.src.StockChart
- highcharts/highstock.src.wrap
- highcharts/highstock.stockChart
- highcharts/modules/exporting
- highcharts/modules/no-data-to-display