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
{"chart":{"zIndex":0,"enabled":true,"type":"column","title":{"zIndex":80,"enabled":true,"maxLength":null,"fontSize":16,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#757575","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 6 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,"valuePrefix":"$","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":"#bdbdbd","opacity":0.6},"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":15,"top":20,"bottom":15,"right":25},"a11y":{"enabled":true,"mode":"chart-elements"},"autoRedraw":true,"bounds":{},"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":"#757575","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":"#757575","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":"#bdbdbd","opacity":0.6},"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":"#bdbdbd","opacity":0.6},"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":"single","selectionMode":"multi-select"},"defaultSeriesType":"column","maxBubbleSize":"20%","minBubbleSize":"5%","maxPointWidth":"100%","minPointLength":0,"baseline":0,"palette":{"type":"distinct","items":["#827717","#c77532","#998675","#6b617b","#c69c6d","#d29b9b","#879872","#16685d","#57a7b1","#bdbdbd"]},"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,"name":"Florida","legendItem":{"enabled":true,"iconStroke":"none"},"error":{"mode":"both","xError":null,"valueError":null,"xErrorWidth":10,"valueErrorWidth":10},"color":"pink","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":"#616161","negativeFill":{"color":"#333","opacity":0.85},"risingFill":{"color":"#333","opacity":0.85},"fallingFill":{"color":"#333","opacity":0.85},"stroke":{"color":"#424242","thickness":1.5},"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":[{"x":"Eyeshadows","value":16252},{"x":"Eyeliner","value":8525},{"x":"Eyebrow pencil","value":14151},{"x":"Nail polish","value":10169},{"x":"Lipstick","value":15198},{"x":"Lip gloss","value":17489}],"xScale":0,"yScale":1}],"isVertical":false,"xAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":{"color":"#9e9e9e","opacity":0.4},"staggerMode":false,"staggerMaxLines":2,"staggerLines":null,"orientation":"bottom","value":null,"title":{"zIndex":35,"enabled":false,"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":"X-Axis","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":{"color":"#9e9e9e","opacity":0.4},"length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":{"color":"#bdbdbd","opacity":0.4},"length":4,"position":"outside"},"scale":0}],"yAxes":[{"enabled":true,"width":null,"drawFirstLabel":true,"drawLastLabel":true,"overlapMode":"no-overlap","stroke":{"color":"#9e9e9e","opacity":0.4},"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 in Dollars","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},"minorLabels":{"zIndex":35,"enabled":false},"ticks":{"zIndex":35,"enabled":true,"stroke":{"color":"#9e9e9e","opacity":0.4},"length":6,"position":"outside"},"minorTicks":{"zIndex":35,"enabled":false,"stroke":{"color":"#bdbdbd","opacity":0.4},"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":"#efe9e9","selectedFill":"#bdbdbd","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#fff","stroke":"#e9e4e4"},"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":"#efe9e9","selectedFill":"#bdbdbd","outlineStroke":"none","allowRangeChange":true,"thumbs":{"normal":{"fill":"#E9E9E9","stroke":"#7c868e"},"hovered":{"fill":"#fff","stroke":"#e9e4e4"},"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://cdn.anychart.com/releases/v8/themes/light_earth.min.js"></script><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(){// set chart theme
anychart.theme('lightEarth');// create column chartvar chart = anychart.column();var dataSet = anychart.data.set([['Eyeshadows',16252],['Eyeliner',8525],['Eyebrow pencil',14151],['Nail polish',10169],['Lipstick',15198],['Lip gloss',17489]]);// set chart title
chart.title('Top 6 Products by Revenue');// map data for the first series, take x from the zero column and value from the first column of data setvar firstSeriesData = dataSet.mapAs({ x:0, value:1});// create first series with mapped datavar series = chart.column(firstSeriesData);
series.name('Florida').color('pink');// get shapesvar shapes = series.rendering().shapes();// set rendering settings
series
.rendering()// set point function to drawing.point(drawer)// set update point function to drawing, change the point shape when the state changes.updatePoint(drawer)// set shapes.shapes(shapes);// set titles for Y-axis
chart.yAxis().title('Revenue in Dollars');// set minimum for y-scale
chart.yScale().minimum(0);// set tooltip prefix
chart.tooltip().valuePrefix('$');// set container id for the chart
chart.container('container');// initiate chart drawing
chart.draw();});functiondrawer(){// if missing (not correct data), then skipping this point drawingif(this.missing){return;}// get shapes groupvar shapes =this.shapes ||this.getShapesGroup(this.pointState);// calculate the left value of the x-axisvar leftX =this.x -this.pointWidth /2;// calculate the right value of the x-axisvar rightX = leftX +this.pointWidth;// calculate the half of point widthvar rx =this.pointWidth /2;
shapes.path
// resets all 'path' operations.clear()// draw cone.moveTo(leftX,this.zero).lineTo(leftX + rx,this.value).lineTo(rightX,this.zero)// set fill settings, gradient.fill(['0 '+ anychart.color.darken(shapes.path.fill().color,0.35),'0.40 '+ anychart.color.darken(shapes.path.fill().color,0.35),'0.85 '+ anychart.color.lighten(shapes.path.fill().color,0.35),'1 '+ anychart.color.lighten(shapes.path.fill().color,0.35)])// set stroke settings.stroke('1.5 '+ anychart.color.darken(shapes.path.fill().color,0.5))// close by connecting the last point with the first straight line.close();}</script></body></html>