We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
No Data Label feature demonstration. By default, the chart does not display any data, so the No Data label is
shown. Clicking the Switch Data button adds data, and the label disappears.
{"chart":{"zIndex":0,"enabled":true,"type":"column","title":{"zIndex":80,"enabled":true,"maxLength":null,"fontSize":16,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#7c868e","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Top 10 Cosmetic Products by Revenue","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":10,"right":0},"background":{"zIndex":0,"enabled":false}},"background":{"zIndex":0.5,"enabled":true},"tooltip":{"enabled":true,"positionMode":"point","title":{"zIndex":1,"enabled":true,"maxLength":null,"fontSize":14,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"left","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"left","orientation":"top","rotation":0,"text":"","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"separator":{"zIndex":1,"enabled":true,"fill":{"color":"#CECECE","opacity":0.3},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":5,"bottom":5,"right":0}},"background":{"zIndex":0,"enabled":true}},"margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":10,"top":10,"bottom":15,"right":20},"a11y":{"enabled":true,"mode":"chart-elements"},"autoRedraw":true,"bounds":{},"noDataLabel":{"zIndex":999999,"enabled":true,"fontSize":15,"fontFamily":"Arial","fontColor":"black","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"bold","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"text":"No data.","position":"center","width":null,"height":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"adjustFontSize":{"width":false,"height":false},"minFontSize":8,"maxFontSize":72,"background":{"zIndex":0,"enabled":false},"padding":{"left":0,"top":0,"bottom":0,"right":0}},"contextMenu":{"enabled":true},"credits":{"text":"AnyChart","url":"https://www.anychart.com/?utm_source=registered","alt":"AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}","imgAlt":"AnyChart - JavaScript Charts","logoSrc":"https://static.anychart.com/logo.png","enabled":false},"selectRectangleMarqueeFill":{"color":"#d3d3d3","opacity":0.4},"selectRectangleMarqueeStroke":"#d3d3d3","legend":{"zIndex":200,"enabled":false,"fontSize":12,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#7c868e","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"bottom","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"...","selectable":false,"disablePointerEvents":false,"useHtml":false,"inverted":false,"itemsLayout":"horizontal","iconSize":15,"width":null,"height":null,"maxWidth":null,"maxHeight":null,"position":"top","positionMode":"outside","drag":false,"itemsFormat":null,"titleFormat":null,"itemsHAlign":"left","itemsSpacing":15,"itemsSourceMode":"default","hoverCursor":"pointer","iconTextSpacing":5,"align":"center","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":10,"top":0,"bottom":10,"right":10},"background":{"enabled":false},"title":{"enabled":false,"maxLength":null,"fontSize":15,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#7c868e","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Title text","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"titleSeparator":{"zIndex":1,"enabled":false,"fill":{"color":"#CECECE","opacity":0.3},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":5,"bottom":5,"right":0}},"paginator":{"zIndex":30,"enabled":true,"fontSize":12,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"orientation":"right","layout":"horizontal","background":{"enabled":false},"padding":{"left":5,"top":0,"bottom":0,"right":0},"margin":{"left":0,"top":0,"bottom":0,"right":0}},"tooltip":{"enabled":false,"title":{"zIndex":1,"enabled":false,"maxLength":null,"fontSize":14,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"left","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"left","orientation":"top","rotation":0,"text":"","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"separator":{"zIndex":1,"enabled":false,"fill":{"color":"#CECECE","opacity":0.3},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":5,"bottom":5,"right":0}},"background":{"zIndex":0,"enabled":true}}},"interactivity":{"spotRadius":2,"multiSelectOnClick":false,"unselectOnClickOutOfPoint":true,"hoverMode":"by-x","selectionMode":"multi-select"},"defaultSeriesType":"column","maxBubbleSize":"20%","minBubbleSize":"5%","maxPointWidth":"100%","minPointLength":0,"baseline":0,"palette":{"type":"distinct","items":["#64b5f6","#1976d2","#ef6c00","#ffd54f","#455a64","#96a6a6","#dd2c00","#00838f","#00bfa5","#ffa000"]},"markerPalette":{"items":["circle","diamond","square","triangle-down","triangle-up","diagonal-cross","pentagon","cross","v-line","star5","star4","trapezium","star7","star6","star10"]},"hatchFillPalette":{"items":[{"type":"backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"vertical","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"grid","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-vertical","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-cross","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"divot","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"vertical-brick","color":"black 0.5","thickness":1,"size":10},{"type":"checker-board","color":"black 0.5","thickness":1,"size":10},{"type":"confetti","color":"black 0.5","thickness":1,"size":10},{"type":"plaid","color":"black 0.5","thickness":1,"size":10},{"type":"solid-diamond","color":"black 0.5","thickness":1,"size":10},{"type":"zig-zag","color":"black 0.5","thickness":1,"size":10},{"type":"weave","color":"black 0.5","thickness":1,"size":10},{"type":"percent-05","color":"black 0.5","thickness":1,"size":10},{"type":"percent-10","color":"black 0.5","thickness":1,"size":10},{"type":"percent-20","color":"black 0.5","thickness":1,"size":10},{"type":"percent-25","color":"black 0.5","thickness":1,"size":10},{"type":"percent-30","color":"black 0.5","thickness":1,"size":10},{"type":"percent-40","color":"black 0.5","thickness":1,"size":10},{"type":"percent-50","color":"black 0.5","thickness":1,"size":10},{"type":"percent-60","color":"black 0.5","thickness":1,"size":10},{"type":"percent-70","color":"black 0.5","thickness":1,"size":10},{"type":"percent-75","color":"black 0.5","thickness":1,"size":10},{"type":"percent-80","color":"black 0.5","thickness":1,"size":10},{"type":"percent-90","color":"black 0.5","thickness":1,"size":10}]},"normal":{"labels":{"enabled":false},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"hovered":{"labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"selected":{"labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null}},"barGroupsPadding":0.8,"barsPadding":0.4,"xScale":0,"yScale":1,"series":[{"enabled":true,"seriesType":"column","clip":true,"tooltip":{"titleFormat":"{%X}","format":"${%Value}{groupsSeparator: }","position":"center-top","anchor":"center-bottom","offsetX":0,"offsetY":5},"legendItem":{"enabled":true,"iconStroke":"none"},"error":{"mode":"both","xError":null,"valueError":null,"xErrorWidth":10,"valueErrorWidth":10},"color":null,"pointWidth":null,"isVertical":false,"normal":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":false,"disablePointerEvents":false,"position":"value","anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":4},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"hovered":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"selected":{"fill":{"color":"#333","opacity":0.85},"negativeFill":{"color":"#333","opacity":0.85},"risingFill":{"color":"#333","opacity":0.85},"fallingFill":{"color":"#333","opacity":0.85},"stroke":{"color":"#333","opacity":0.85},"lowStroke":{"color":"#333","opacity":0.85},"highStroke":{"color":"#333","opacity":0.85},"lowFill":{"color":"#333","opacity":0.85},"highFill":{"color":"#333","opacity":0.85},"negativeStroke":{"color":"#333","opacity":0.85},"risingStroke":{"color":"#333","opacity":0.85},"fallingStroke":{"color":"#333","opacity":0.85},"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"a11y":{"enabled":false,"titleFormat":"Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"},"xMode":"ordinal","data":[["Rouge","80540"],["Foundation","94190"],["Mascara","102610"],["Lip gloss","110430"],["Lipstick","128000"],["Nail polish","143760"],["Eyebrow pencil","170670"],["Eyeliner","213210"],["Eyeshadows","249980"]],"xScale":0,"yScale":1}],"isVertical":false,"xAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":"#CECECE","staggerMode":false,"staggerMaxLines":2,"staggerLines":null,"orientation":"bottom","value":null,"title":{"zIndex":35,"enabled":true,"maxLength":null,"fontSize":13,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Product","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":5,"bottom":0,"right":0},"background":{"enabled":false}},"labels":{"zIndex":35,"enabled":true},"minorLabels":{"zIndex":35,"enabled":false},"ticks":{"zIndex":35,"enabled":true,"stroke":"#CECECE","length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":"#EAEAEA","length":4,"position":"outside"},"scale":0}],"yAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":"#CECECE","staggerMode":false,"staggerMaxLines":2,"staggerLines":null,"orientation":"left","value":null,"title":{"zIndex":35,"enabled":true,"maxLength":null,"fontSize":13,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#545f69","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Revenue","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":5,"right":0},"background":{"enabled":false}},"labels":{"zIndex":35,"enabled":true,"format":"${%Value}{groupsSeparator: }"},"minorLabels":{"zIndex":35,"enabled":false},"ticks":{"zIndex":35,"enabled":true,"stroke":"#CECECE","length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":"#EAEAEA","length":4,"position":"outside"},"scale":1}],"crosshair":{"zIndex":41,"enabled":false,"xStroke":"#969EA5","yStroke":"#969EA5","displayMode":"float","xLabels":[{"enabled":true,"fontSize":12,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":400,"letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":true,"useHtml":false,"text":"Label text","width":null,"height":null,"anchor":null,"offsetX":0,"offsetY":0,"rotation":0,"adjustFontSize":{"width":false,"height":false},"minFontSize":8,"maxFontSize":16,"background":{"zIndex":0,"enabled":true},"padding":{"left":10,"top":5,"bottom":5,"right":10},"axisIndex":0}],"yLabels":[{"enabled":true,"fontSize":12,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":400,"letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"start","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":true,"useHtml":false,"text":"Label text","width":null,"height":null,"anchor":null,"offsetX":0,"offsetY":0,"rotation":0,"adjustFontSize":{"width":false,"height":false},"minFontSize":8,"maxFontSize":16,"background":{"zIndex":0,"enabled":true},"padding":{"left":10,"top":5,"bottom":5,"right":10},"axisIndex":0}]},"scales":[{"type":"ordinal","inverted":false,"ticks":{"maxCount":100},"mode":"discrete"},{"type":"linear","inverted":false,"maximum":null,"minimum":0,"minimumGap":0.1,"maximumGap":0.1,"softMinimum":null,"softMaximum":null,"alignMinimum":true,"alignMaximum":true,"maxTicksCount":1000,"ticks":{"mode":"linear","base":0,"allowFractional":true,"minCount":4,"maxCount":6},"minorTicks":{"mode":"linear","base":0,"allowFractional":true,"count":5},"stackMode":"none","stackDirection":"direct","stickToZero":true,"comparisonMode":"none"}],"crossing":{"stroke":"none"},"quarters":{},"yCrossAxes":[0],"xCrossAxes":[0],"xScroller":{"zIndex":35,"enabled":false,"height":16,"minHeight":null,"maxHeight":null,"orientation":"bottom","inverted":false,"autoHide":false,"fill":"#f7f7f7","selectedFill":"#ddd","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#ffffff","stroke":"#757575"},"enabled":true,"autoHide":false},"position":"after-axes"},"yScroller":{"zIndex":35,"enabled":false,"height":16,"minHeight":null,"maxHeight":null,"orientation":"left","inverted":false,"autoHide":false,"fill":"#f7f7f7","selectedFill":"#ddd","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#ffffff","stroke":"#757575"},"enabled":true,"autoHide":false},"position":"after-axes"},"xZoom":{"startRatio":0,"endRatio":1,"continuous":true},"yZoom":{"startRatio":0,"endRatio":1,"continuous":true}}}
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><scriptsrc="https://code.jquery.com/jquery-1.11.3.min.js"></script><linkhref="https://cdn.anychart.com/playground-css/general-features/no-data-label-feature/style.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){// create column chartvar chart = anychart.column();var data =[['Rouge','80540'],['Foundation','94190'],['Mascara','102610'],['Lip gloss','110430'],['Lipstick','128000'],['Nail polish','143760'],['Eyebrow pencil','170670'],['Eyeliner','213210'],['Eyeshadows','249980']];// set chart padding
chart.padding().top(10);// set chart title text settings
chart.title().enabled(true).text('Top 10 Cosmetic Products by Revenue');// enable no data label
chart.noData().label(true);// create area series with passed datavar series = chart.column(data);// set series tooltip settings
series.tooltip().titleFormat('{%X}');
series
.tooltip().position('center-top').anchor('center-bottom').offsetX(0).offsetY(5).format('${%Value}{groupsSeparator: }');// set scale minimum
chart.yScale().minimum(0);// set yAxis labels formatter
chart.yAxis().labels().format('${%Value}{groupsSeparator: }');// tooltips position and interactivity settings
chart.tooltip().positionMode('point');
chart.interactivity().hoverMode('by-x');// axes titles
chart.xAxis().title('Product');
chart.yAxis().title('Revenue');// set container id for the chart
chart.container('container');// initiate chart drawing
chart.draw();// add button to container$('#container').append('<button class="switch-btn switch-btn-primary" id="switch-data-btn">Switch Data</button>');// event to switch data$('#switch-data-btn').on('click',function(){// if data rows === 0 then empty data and show label
series.data().getRowsCount()? series.data(null): series.data(data);});});</script></body></html>