New to Kendo UI for jQuery? Start a free 30-day trial
Rendering Very Small Data Points in Chart
Updated on Jul 11, 2025
Environment
| Product | Kendo UI Chart |
| Version | 2025.2.702 |
Description
I have a Kendo UI Chart with dynamic data, and some of the values are extremely small, making them invisible on the chart. Zooming in is not an option as it affects the alignment of other elements like vertical lines. I need a solution to make the very small data labels visible without compromising the visualization of larger values or the chart layout.
This knowledge base article also answers the following questions:
- How to visualize very small values in Kendo UI Chart?
- How to handle dynamic data with varying scales in Kendo UI Chart?
- How to display labels for specific values in Kendo UI Chart?
Solution
To make very small data points visible on the chart, set a maximum value for the valueAxis and dynamically adjust the labels to display only for significant values.
-
Configure the
valueAxis.maxproperty to limit the axis range. This ensures the chart scales appropriately for very small values. -
Use the
seriesDefaults.labels.templatefunction to dynamically display labels only for values above a specific threshold.
Example:
javascript
$("#chart").kendoChart({
valueAxis: {
max: 0.00002 // Adjust based on the range of your data
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
position: "top",
padding: {
top: -20
},
template: function(data) {
// Display label for values above the threshold
if (data.value > 0.02) {
return data.value;
} else {
return "";
}
}
}
},
series: [
// Your series data here
]
});This approach dynamically handles varying data scales and ensures that labels are displayed only for significant values while optimizing the chart visualization.
For a runnable example please refer to the next demo.
<div id="example">
<div class="demo-section wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
valueAxis: {
max: 0.00002,
minorGridLines: {
visible: false
},
majorGridLines: {
visible: false
}
},
zoomable:true,
legend: {
position: "top"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
position: "top",
padding: {
top: -20
},
template: function(data) {
if(data.value === 0.026432180777192116) {
return data.value
}
else {
return ""
}
}
}
},
series: [{
name: "India",
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.000012983681699552108,
0.000013412467524176463,
0.000013786298040940892,
0.000014106426533544436,
0.000014374470083566848,
0.000014592342267860658,
0.000014762182217964437,
0.000014886300959915388,
0.000014967132301535457,
0.000015007191905169748,
0.000015009039088909049,
0.00001497524954174878,
0.000014908388038747944,
0.000014810986613156274,
0.000014685529095004313,
0.000014534434740198776,
0.00001436004549759673,
0.000014164619642542675,
0.000013950324500910938,
0.000013719229173148051,
0.000013473302715283353,
0.00001321441050095018,
0.00001294431604037527,
0.000012664677342399955,
0.000012377050552458968,
0.000012082889952580445,
0.00001178355250885943,
0.000011480295142973773,
0.000011174286555615254,
0.000010866599041037261,
0.000010558223948464729,
0.00001025006622512592,
0.000009942951692210045,
0.00000963763250183547,
0.000009334788046544418,
0.000009035031325765885,
0.00000873890985531034,
0.000008446912943327334,
0.000008159471690305509,
0.000007876966265030205,
0.000007599726814078167,
0.000007328038009291049,
0.000007062141321512172,
0.00000680223911331268,
0.000006548496912728297,
0.00000630104750598548,
0.000006059991846996127,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
}, {
name: "Russian Federation",
data:[
0.026432180777192116,
1.2750432176744653e-7,
4.7499011657237133e-7,
9.957108204616816e-7,
0.0000016495432646479458,
0.000002402087147856946,
0.0000032239677238976583,
0.000004090234142495319,
0.000004979826826456701,
0.000005875104307051515,
0.0000067614241743285675,
0.000007626764727319824,
0.000008461394827463664,
0.000009257572855858598,
0.00001000928386929445,
0.000010712004041124601,
0.000011362493751221336,
0.000011958609320572577,
0.000012499144759203773,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.000005825402695336379,
0.000005597326889983378,
0.000005375787168304669,
0.000005160785804037005,
0.000004952304607286351,
0.000004750308107759338,
0.000004554744919005316,
0.000004365550012153108,
0.000004182645625405712,
0.000004005942628282355,
0.000003835341885860544,
0.000003670736759886495,
0.000003512012654027785,
0.0000033590483781154035,
0.0000032117181945068296,
0.000003069891590712359,
0.0000029334344162634807,
0.0000028022100195812527,
0.000002676079702723655,
0.0000025549029487592634,
0.0000024385390133829787,
0.000002326846242795,
0.0000022196834379428765,
0.000002116909627147834,
0.000002018385430346825,
0.0000019239719222241547,
0.000001833532451200881,
0.0000017469318436269532,
0.0000016640370859022369,
0.0000015847174381633522,
0.0000015088446616573492,
0.0000014362931324285455,
0.0000013669398413185263,
0.0000013006648487134953,
0.0000012373508297969238,
0.000001176883756670577,
0.0000011191523299203254,
0.0000010640485470503336,
0.0000010114674751093844,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
}, {
name: "Germany",
data:[
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
9.613071370040416e-7,
9.134687957157439e-7,
8.678567837705486e-7,
8.243783895522938e-7,
7.829440846762736e-7,
7.434672966155631e-7,
7.058644655444368e-7,
6.700547601212747e-7,
6.359604753924941e-7,
6.035066348886176e-7,
5.726208200940164e-7,
5.432336820376804e-7,
5.152781454853539e-7,
4.886899205303052e-7,
4.634071331111045e-7,
4.3937038185504207e-7,
4.165226243912912e-7,
3.9480912050748884e-7,
3.741772900411888e-7,
3.545768265666993e-7,
3.3595944159969804e-7,
3.182788645972323e-7,
3.01490842957719e-7,
2.855529430689785e-7,
2.704246071516536e-7,
2.5606701115066244e-7,
2.4244303631348885e-7,
2.2951719813590898e-7,
2.1725558951857238e-7,
2.0562582392358308e-7,
1.945969501093714e-7,
1.841394237089844e-7,
1.7422506459752185e-7,
1.6482695741615316e-7,
1.559194515721174e-7,
1.4747807597359497e-7,
1.394794821862888e-7,
1.3190145864427905e-7,
1.247227885414759e-7,
1.1792329246418376e-7,
1.1148374312597298e-7,
1.0538582984054301e-7,
9.961212299458566e-8,
9.414603141522093e-8,
8.897177394828759e-8,
8.407432261492431e-8,
7.943940261156968e-8,
7.505342125568859e-8,
7.090346088034494e-8,
6.69772575179195e-8,
0,
0,
0,
0,
0
]
},{
name: "World",
data: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
6.326312984583637e-8,
5.975000050284507e-8,
5.642732148203322e-8,
5.3285102552536046e-8,
5.031383309983539e-8
]
}],
categoryAxis: {
categories: [
".00",
"1,229.00",
"2,458.00",
"3,687.00",
"4,916.00",
"6,145.00",
"7,374.00",
"8,603.00",
"9,832.00",
"11,061.00",
"12,290.00",
"13,519.00",
"14,748.00",
"15,977.00",
"17,206.00",
"18,435.00",
"19,664.00",
"20,893.00",
"22,122.00",
"23,351.00",
"24,580.00",
"25,809.00",
"27,038.00",
"28,267.00",
"29,496.00",
"30,725.00",
"31,954.00",
"33,183.00",
"34,412.00",
"35,641.00",
"36,870.00",
"38,099.00",
"39,328.00",
"40,557.00",
"41,786.00",
"43,015.00",
"44,244.00",
"45,473.00",
"46,702.00",
"47,931.00",
"49,160.00",
"50,389.00",
"51,618.00",
"52,847.00",
"54,076.00",
"55,305.00",
"56,534.00",
"57,763.00",
"58,992.00",
"60,221.00",
"61,450.00",
"62,679.00",
"63,908.00",
"65,137.00",
"66,366.00",
"67,595.00",
"68,824.00",
"70,053.00",
"71,282.00",
"72,511.00",
"73,740.00",
"74,969.00",
"76,198.00",
"77,427.00",
"78,656.00",
"79,885.00",
"81,114.00",
"82,343.00",
"83,572.00",
"84,801.00",
"86,030.00",
"87,259.00",
"88,488.00",
"89,717.00",
"90,946.00",
"92,175.00",
"93,404.00",
"94,633.00",
"95,862.00",
"97,091.00",
"98,320.00",
"99,549.00",
"100,778.00",
"102,007.00",
"103,236.00",
"104,465.00",
"105,694.00",
"106,923.00",
"108,152.00",
"109,381.00",
"110,610.00",
"111,839.00",
"113,068.00",
"114,297.00",
"115,526.00",
"116,755.00",
"117,984.00",
"119,213.00",
"120,442.00",
"121,671.00",
"122,900.00",
"124,129.00",
"125,358.00",
"126,587.00",
"127,816.00",
"129,045.00",
"130,274.00",
"131,503.00",
"132,732.00",
"133,961.00",
"135,190.00",
"136,419.00",
"137,648.00",
"138,877.00",
"140,106.00",
"141,335.00",
"142,564.00",
"143,793.00",
"145,022.00",
"146,251.00",
"147,480.00",
"148,709.00",
"149,938.00",
"151,167.00",
"152,396.00",
"153,625.00",
"154,854.00",
"156,083.00",
"157,312.00",
"158,541.00",
"159,770.00",
"160,999.00",
"162,228.00",
"163,457.00",
"164,686.00",
"165,915.00",
"167,144.00",
"168,373.00",
"169,602.00",
"170,831.00",
"172,060.00",
"173,289.00",
"174,518.00",
"175,747.00",
"176,976.00",
"178,205.00",
"179,434.00",
"180,663.00",
"181,892.00",
"183,121.00",
"184,350.00",
"185,579.00",
"186,808.00",
"188,037.00",
"189,266.00",
"190,495.00",
"191,724.00",
"192,953.00",
"194,182.00",
"195,411.00"
],
line: {
visible: false
},
labels: {
position: 'start',
step:40
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>