search

highcharts / node-export-server

Highcharts Node.js export server
Other
356 stars 260 forks source link

Chart is not exporting when svg images are placed on the x-axis labels #592

Open RaviMintel07 opened 2 days ago

RaviMintel07 commented 2 days ago

Hi Team ,

am using high-chart-exporter server 3.1.1 and trying to render svg image on the x-axis label but it failed to do , this is my chart config and am expecting the chart something like this . This is working when just place text labels ?

Screenshot from 2024-11-13 18-23-15

{ "chart": { "style": { "fontFamily": "DINPro, Arial", "fontSize": "12px", "fill": "#666", "color": "#666" }, "spacingBottom": 2, "spacingLeft": 0, "backgroundColor": null, "type": "area", "polar": true, "spacing": [ 35, 30, 30, 30 ], "animation": {} }, "title": { "text": "", "align": "left", "widthAdjust": 0, "style": { "color": "#2b2b2b", "fontSize": "14px", "fill": "#2b2b2b" }, "margin": 20 }, "legend": { "style": { "fontSize": "11px" }, "itemStyle": { "align": "left", "fontSize": "12px", "fontWeight": "normal", "fill": "#2b2b2b", "color": "#2b2b2b", "textOverflow": null, "overflow": null, "padding": 0 }, "itemMarginTop": 8, "verticalAlign": "bottom", "align": "center", "alignColumns": false, "enabled": true, "margin": 50 }, "credits": { "enabled": false, "text": "Mintel", "href": "" }, "plotOptions": { "series": { "states": { "inactive": { "opacity": 1 }, "hover": { "enabled": false } }, "events": {}, "point": { "events": {} }, "area": { "fillOpacity": 0.5, "tooltip": { "headerFormat": "<span style=\"font-weight: bold\">{point.point.xLabel}</span><br/>" } }, "marker": { "radius": 2 }, "dataLabels": { "style": { "color": "contrast", "fontSize": "11px" } }, "animation": {} }, "line": { "tooltip": { "headerFormat": "<span style=\"font-weight: bold\">{point.point.xLabel}</span><br/>" } }, "area": { "tooltip": { "headerFormat": "<span style=\"font-weight: bold\">{point.point.xLabel}</span><br/>" }, "fillOpacity": 0.15 }, "heatmap": { "borderWidth": 1, "borderColor": "#fff", "nullColor": "#fff", "states": { "hover": { "borderWidth": 3 } } } }, "xAxis": { "labels": { "y": -13, "style": { "paddingTop": "0px", "fontSize": "11px" }, "distance": 45, "align": "center", "__values": [ "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"#000\"><path d=\"M10 17.843l7.593-10.305L14.794 2.5H5.47L2.398 7.526 10 17.843z\" fill=\"#AFE9D8\"/><path d=\"M14.677 2.5L10 17.7 5.323 2.5h9.354zM3 7.5h14\"/><path d=\"M10 2.431L12.856 7.5H7.144L10 2.431z\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Premium</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#000\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.16 14.482l2.829 2.828\"/><path d=\"M2.445 9.423c.543-.542.785-1.017.768-1.418-.006-.15-.057-.286-.168-.463a4.87 4.87 0 0 0-.155-.228c-.384-.55-.51-.881-.356-1.403.138-.468.534-.761 1.184-1.045.115-.05.234-.098.383-.155.51-.197.733-.3.709-.25-.01.021-.02-.095-.07-.306l-.037-.153c-.18-.732-.2-1.03.132-1.36.978-.979 2.34-.51 3.974 1.125l7.859 7.858-6.364 6.364-8.212-8.212.353-.354z\" fill=\"#BFE4FF\"/><path fill=\"#F6ADD4\" fill-rule=\"nonzero\" d=\"M8.183 15.867l6.364-6.363 2.121 2.12-6.364 6.365z\"/><path d=\"M7.209 5.824l.202.202M8.825 7.44l2.02 2.02\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Tasty</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\">\n <g stroke-linejoin=\"round\"><path d=\"M9.88 6.175l3.805-3.129.174 3.882c1.225.623 2.102 1.573 2.461 2.79a2 2 0 0 1-.35 3.61c-.335.605-.828 1.076-1.47 1.421v2.888h-3v-2.164a16.433 16.433 0 0 1-2-.005v2.17h-3v-2.86C5.067 14.07 4.324 12.815 4.324 11c0-2.783 2.487-4.586 5.557-4.825z\" fill=\"#F6ADD4\"/><path d=\"M4.7 13c-.35-.727-.813-1.235-1.388-1.526-.575-.29-.846-.88-.812-1.768\" stroke-linecap=\"round\"/></g>\n <circle fill=\"#FEDB00\" cx=\"5\" cy=\"4\" r=\"1.5\"/>\n </g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Good Value</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(3 3)\" stroke=\"#000\" fill=\"none\" fill-rule=\"evenodd\">\n <circle fill=\"#FEDB00\" cx=\"7\" cy=\"7\" r=\"7.5\"/>\n <path d=\"M7 11.5c-2.46 0-4.5-1.53-4.5-3.5v-.5h9V8c0 1.97-2.04 3.5-4.5 3.5z\" fill=\"#FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.5 4.5c.505-.667 1.007-1 1.507-1s.997.333 1.493 1M2.5 4.5c.505-.667 1.007-1 1.507-1s.997.333 1.493 1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Exciting</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <circle stroke=\"#000\" fill=\"#EE5BAA\" cx=\"8\" cy=\"8\" r=\"5.5\"/>\n <path d=\"M11.22 8.44a3.267 3.267 0 0 0-1.238-2.563m-1.847-.705a3.325 3.325 0 0 0-.188-.005\" stroke=\"#FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle stroke=\"#000\" fill=\"#EE5BAA\" cx=\"12.5\" cy=\"13.5\" r=\"1\"/>\n <path d=\"M13.24 14.521c.07.812.313 1.305.73 1.479.624.26 1.934-.312 2.727.02.528.223.809.716.843 1.48\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Fun</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke-linejoin=\"round\" stroke=\"#000\"><path d=\"M2.5 14.5v-12h15v12h-15z\" fill=\"#7FC9FF\"/><path d=\"M7.5 2.5h5v5.707l-2.146-2.146a.5.5 0 0 0-.708 0L7.5 8.207V2.5z\" fill=\"#FEDB00\" stroke-linecap=\"round\"/><path d=\"M9.508 11.853l.592-.592.161-.646A1.471 1.471 0 0 1 11.69 9.5c.677 0 1.264.47 1.41 1.133L13.402 12h.58a1.5 1.5 0 0 1 1.403.968c.103.272.141.552.112.833a2.074 2.074 0 0 1-.352.953c.463.717.291 1.53-.461 2.297a1.5 1.5 0 0 1-1.07.449H9.356L7.5 16.346v-3.643l2.008-.85z\" fill=\"#FFF\" stroke-linecap=\"round\"/><path d=\"M4.5 12.5h3v5h-3v-5z\" fill=\"#FC3E53\" stroke-linecap=\"round\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Appealing Packaging</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\">\n <circle fill=\"#FEDB00\" fill-rule=\"nonzero\" cx=\"7\" cy=\"7\" r=\"2.5\"/>\n <g transform=\"translate(11.5 4.5)\">\n <ellipse fill=\"#7FD47F\" cx=\"3\" cy=\"4.995\" rx=\"3.5\" ry=\"4.5\"/>\n <path d=\"M3 4v8c0 .667-.333 1-.998 1M4 6.035L3 7M3 7L2 6\" stroke-linecap=\"round\"/>\n </g>\n <path d=\"M7 11.5v.5\" stroke-linecap=\"round\"/>\n <g fill-rule=\"nonzero\" stroke-linecap=\"round\"><path d=\"M7 2v.5M2.5 7H2\"/></g>\n <g fill-rule=\"nonzero\" stroke-linecap=\"round\"><path d=\"M10.485 3.45l-.353.353M3.768 3.803l-.354-.353\"/></g>\n <path d=\"M3.414 10.45l.354-.354\" fill-rule=\"nonzero\" stroke-linecap=\"round\"/></g></svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Natural</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g stroke=\"#000\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M14.458 9.542A2.5 2.5 0 0 1 14 14.5H6a2.5 2.5 0 0 1-.458-4.958A3.502 3.502 0 0 1 7.625 5.78a2.5 2.5 0 1 1 4.751 0 3.502 3.502 0 0 1 2.082 3.76z\" fill=\"#7FD47F\"/><path fill=\"#C88C00\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.5 14.5h3v3h-3z\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Environmentally Friendly</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\"><path d=\"M10 16.94c-.197 0-.312.046-.523.192l-.134.092c-.374.252-.7.343-1.149.232-.477-.119-.706-.353-.94-.8-.052-.1-.073-.14-.099-.183a.741.741 0 0 0-.322-.319c-.182-.096-.297-.105-.596-.068a2.106 2.106 0 0 1-.442.025 1.282 1.282 0 0 1-.798-.344 1.58 1.58 0 0 1-.112-.11c-.292-.318-.351-.581-.351-1.076 0-.316-.022-.429-.14-.602a.713.713 0 0 0-.286-.252 2.314 2.314 0 0 0-.25-.103c-.479-.184-.736-.38-.912-.846-.158-.421-.114-.757.077-1.143a7.52 7.52 0 0 1 .082-.16c.124-.24.158-.36.133-.561-.023-.195-.084-.308-.243-.491l-.105-.12c-.304-.352-.435-.661-.378-1.13.058-.481.26-.742.662-1.023a7.17 7.17 0 0 0 .147-.103c.163-.12.245-.216.31-.387.074-.196.069-.318-.001-.604a3.115 3.115 0 0 1-.061-.282 1.29 1.29 0 0 1 .222-.995c.285-.416.575-.538 1.104-.603.323-.04.428-.073.587-.215a.79.79 0 0 0 .133-.15c.066-.1.094-.178.154-.423.125-.51.283-.785.724-1.018.378-.2.713-.206 1.093-.078.058.019.11.039.203.074.263.1.383.119.58.07.183-.045.287-.118.438-.284l.109-.123C9.235 2.671 9.52 2.5 10 2.5c.48 0 .766.17 1.085.53l.108.121c.151.167.256.24.438.285.196.049.315.03.578-.07.092-.035.143-.055.2-.074.382-.128.718-.123 1.098.078.442.233.6.51.726 1.02.059.24.085.316.147.412.035.055.08.106.138.159.157.14.262.174.583.213.53.064.821.187 1.108.605.225.328.282.648.222 1.007-.014.081-.023.12-.06.273-.07.286-.075.407-.002.6.064.171.147.268.31.388l.146.101c.402.282.605.543.663 1.026.057.469-.074.777-.379 1.13l-.104.119c-.16.183-.22.296-.243.49-.025.203.009.324.133.565l.084.162c.189.384.232.719.075 1.138-.175.464-.432.66-.91.843-.16.062-.193.075-.254.106a.72.72 0 0 0-.284.252c-.12.175-.142.289-.142.606 0 .512-.066.785-.384 1.11-.037.036-.037.036-.077.072-.238.212-.494.32-.778.341-.142.01-.234.004-.458-.024-.3-.036-.416-.027-.6.07a.745.745 0 0 0-.323.318 4.178 4.178 0 0 0-.1.187c-.234.445-.462.678-.938.797-.448.11-.774.02-1.146-.23l-.136-.094c-.211-.146-.327-.192-.524-.192z\" fill=\"#7FD47F\"/><path d=\"M9.117 7.778l.202-.7a1.46 1.46 0 0 1 1.403-1.054A1.42 1.42 0 0 1 12.1 7.107l.289 1.179h.83a1.281 1.281 0 0 1 1.269 1.464c-.024.17-.083.361-.169.578a5.962 5.962 0 0 1-.221.494c.666.844.47 1.735-.545 2.42a1.5 1.5 0 0 1-.84.258H8.795L7.5 12.211V8.903l.218-.148.783-.536.616-.441z\" fill=\"#FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.5 8.5h2v4h-2v-4z\" fill=\"#0094FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Trustworty Brand</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M17.452 15.006v-2.683m0-3.097a7.226 7.226 0 0 0-10.79-6.288L4.295 5.172 3 7.5V16l7.23 2.972 7.222-2.93V9.226z\" fill=\"#FAD6E9\"/><path d=\"M17.452 15.006v-2.683m0-3.097a7.226 7.226 0 0 0-10.79-6.288M4.295 5.097A7.193 7.193 0 0 0 3 9.226v5.78\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.387 16.452v-6.71a5.161 5.161 0 0 0-10.322 0m0 3.228v3.482\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.806 18v-2.535m0-2.626V9.578a2.58 2.58 0 1 0-5.16 0V18M10.226 10.258v3.097m0 2.58v.517\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Unique</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\">\n <circle fill=\"#FFF\" cx=\"12\" cy=\"12\" r=\"5.5\"/>\n <circle fill=\"#000\" cx=\"12\" cy=\"12\" r=\"1\"/>\n <path d=\"M2 17.5h3M2 12h1.5M2 6.5h3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"#FEDB00\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.5 2.5h5v2h-5z\"/><path d=\"M6.5 12H8M12 12l2-2M16 12h1.5M12 6.5V8M12 16v1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Convenient</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke-linejoin=\"round\" stroke=\"#000\">\n <path d=\"M3.5 14.5h13v3h-13v-3z\" fill=\"#FFEDBF\"/><path d=\"M17.5 14.5h-15v-3h15v3z\" fill=\"#C88C00\"/>\n <g stroke-linecap=\"round\"><path d=\"M17.554 7.5H2.5V7c0-2.288 3.284-4.5 7.5-4.5 4.151 0 7.26 2.131 7.497 4.449l.057.551z\" fill=\"#FFEDBF\"/><path d=\"M9.066 11.5h5.868L12 15.901 9.066 11.5z\" fill=\"#FEDB00\"/><path d=\"M2 9.5h16\"/></g>\n </g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Filling</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\"><path d=\"M10.067 5.13C9.8 3.986 10.11 3.109 11 2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 17.5c-1.162 0-2.505-.097-3.12-.249C3.934 16.523 2.5 14.244 2.5 11c0-3.097 2.03-5.994 4.398-6.49.22-.046.41.01.78.165.15.063.75.334.823.366.197.086.367.157.527.217.417.16.744.242.972.242.228 0 .555-.083.972-.242.16-.06.33-.13.526-.217.071-.032.674-.303.824-.366.369-.155.56-.21.78-.164C15.47 5.007 17.5 7.903 17.5 11c0 3.22-1.444 5.502-4.378 6.242-.626.158-1.963.258-3.122.258z\" fill=\"#7FD47F\"/><path d=\"M13.934 12.985c.498-1.65.128-2.835-.294-3.575m-1.077-1.74a1.396 1.396 0 0 0-.145-.139\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Healthy</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient x1=\"43.1340532%\" y1=\"-3.26702315%\" x2=\"54.9596813%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F6ADD4\" offset=\"0%\"></stop>\n <stop stop-color=\"#F6ADD4\" offset=\"49.9504489%\"></stop>\n <stop stop-color=\"#FFEDBF\" offset=\"53.8611535%\"></stop>\n <stop stop-color=\"#FFEDBF\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(10.000000, 10.000000) rotate(20.000000) translate(-10.000000, -10.000000) translate(2.000000, 3.000000)\" stroke=\"#000000\"><path d=\"M8,14.5 C3.85786438,14.5 0.5,11.1421356 0.5,7 C0.5,2.85786438 3.85786438,-0.5 8,-0.5 C12.1421356,-0.5 15.5,2.85786438 15.5,7 C15.5,11.1421356 12.1421356,14.5 8,14.5 Z M8,9 C9.1045695,9 10,8.1045695 10,7 C10,5.8954305 9.1045695,5 8,5 C6.8954305,5 6,5.8954305 6,7 C6,8.1045695 6.8954305,9 8,9 Z\" fill=\"url(#linearGradient-1)\"></path><path d=\"M9.16672185,12.670543 C9.16672185,12.6200265 9.1657854,12.5697286 9.16392892,12.5196659 M8.60505576,10.6253541 C7.90723592,9.45471573 6.62855556,8.67054299 5.16672185,8.67054299\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(7.166722, 10.670543) rotate(155.000000) translate(-7.166722, -10.670543) \"></path><path d=\"M0.52581549,6.80861881 C1.69248216,7.47528548 2.60914882,7.80861881 3.27581549,7.80861881 C3.94248216,7.80861881 4.85914882,7.47528548 6.02581549,6.80861881\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M9.98389134,6.18784819 C11.150558,6.85451486 12.0672247,7.18784819 12.7338913,7.18784819 C13.400558,7.18784819 14.3172247,6.85451486 15.4838913,6.18784819\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(12.733891, 6.687848) scale(1, -1) translate(-12.733891, -6.687848) \"></path></g>\n </g></svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Indulgent Treat</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(3 2)\" stroke=\"#000\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M8.034 11.395a5.648 5.648 0 0 0 1.588-.577c.5-.272.965-.62 1.393-1.044l1.76 4.358-1.937-.485-1.058 1.695-1.746-3.947zM5.69 11.517a5.648 5.648 0 0 1-1.555-.66 6.168 6.168 0 0 1-1.337-1.114L.812 14.002l1.96-.382.968 1.747 1.95-3.85z\" fill=\"#FF8B96\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle fill=\"#7FC9FF\" cx=\"7\" cy=\"6\" r=\"5.5\"/>\n <path d=\"M7 7.388L5.105 8.436l.36-2.215-1.502-1.54 2.08-.318L7 2.323l.957 2.04 2.08.318-1.503 1.54.361 2.215L7 7.388z\" fill=\"#FEDB00\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Quality</span>\n </div>\n </div>", "\n<div>\n \n <div style=\"height:30px;width:30px;margin:0 auto;\">\n <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"#000\">\n <g stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15.475 15.475a6.5 6.5 0 0 1-9.193 0l-.353-.354L15.12 5.93l.354.353a6.5 6.5 0 0 1 0 9.193z\" fill=\"#F8971D\"/><path d=\"M14.06 14.06a4.5 4.5 0 0 1-6.363 0l-.354-.353 6.364-6.364.354.354a4.5 4.5 0 0 1 0 6.364z\" fill=\"#FFEDBF\"/><path d=\"M11.94 11.94a1.5 1.5 0 0 1-2.122 0l-.354-.354 2.122-2.122.353.354a1.5 1.5 0 0 1 0 2.121z\" fill=\"#FFF\"/><path d=\"M11.94 11.94l2.12 2.12M12.434 10.737l2.859.142M10.737 12.434l.227 2.773\"/></g>\n <path d=\"M10.558 6.57a6 6 0 0 0-7.403 8.969\" fill=\"#F8971D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 5v1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.11 4.473c-.342.49-1.17.36-1.633.036-.488-.342-.972-1.11-.619-1.613.353-.504 1.24-.313 1.728.029.463.325.868 1.058.525 1.548z\" fill=\"#7FD47F\"/>\n </g>\n </svg>\n \n</div>\n\n <div style=\"margin:0 auto; text-align: center; font-size: 10px\">\n <span>Refreshing</span>\n </div>\n </div>" ], "useHTML": true }, "title": { "margin": 20, "style": { "fontSize": "12px" }, "color": "#666", "text": null }, "lineColor": "#ccc", "tickColor": "#ccc", "gridLineDashStyle": "longdash", "tickInterval": 1 }, "yAxis": { "labels": { "style": { "paddingRight": "60px", "textOverflow": "none", "lineHeight": "12", "fontSize": "11px" }, "format": "{value}%" }, "maxPadding": 0.0001, "title": { "margin": 20, "style": { "fontSize": "12px" }, "color": "#666", "text": null }, "lineColor": "#ccc", "tickColor": "#ccc", "tickInterval": 20, "min": 0, "max": 100, "startOnTick": false, "endOnTick": false }, "tooltip": { "backgroundColor": null, "borderColor": "#939393", "borderRadius": 4, "headerFormat": "<span style=\"font-weight: bold\">{point.key}</span><br />", "hideDelay": 200, "shadow": true, "style": { "fontSize": "13px", "fill": "#2b2b2b", "color": "#2b2b2b", "lineHeight": "20px", "pointerEvents": "auto" }, "outside": true, "useHTML": true, "borderWidth": null }, "exporting": { "enabled": false, "useHTML": true, "buttons": { "contextButton": { "menuItems": [ "downloadCSV" ] } } }, "lang": { "noData": null }, "series": [ { "name": "Primary Group", "data": [ { "y": 53.5, "x": 0, "xLabel": { "label": "Premium", "icon": "premium" } }, { "y": 63.5, "x": 1, "xLabel": { "label": "Tasty", "icon": "tasty" } }, { "y": 41.7, "x": 2, "xLabel": { "label": "Good Value", "icon": "good_value" } }, { "y": 35.9, "x": 3, "xLabel": { "label": "Exciting", "icon": "exciting" } }, { "y": 33.5, "x": 4, "xLabel": { "label": "Fun", "icon": "fun" } }, { "y": 30.2, "x": 5, "xLabel": { "label": "Appealing Packaging", "icon": "appealing_packaging" } }, { "y": 22.8, "x": 6, "xLabel": { "label": "Natural", "icon": "natural" } }, { "y": 44.2, "x": 7, "xLabel": { "label": "Environmentally Friendly", "icon": "environmental" } }, { "y": 44.1, "x": 8, "xLabel": { "label": "Trustworty Brand", "icon": "trustworthy" } }, { "y": 56.3, "x": 9, "xLabel": { "label": "Unique", "icon": "unique" } }, { "y": 43.2, "x": 10, "xLabel": { "label": "Convenient", "icon": "convenient" } }, { "y": 44.2, "x": 11, "xLabel": { "label": "Filling", "icon": "filling" } }, { "y": 37.7, "x": 12, "xLabel": { "label": "Healthy", "icon": "healthy" } }, { "y": 47.2, "x": 13, "xLabel": { "label": "Indulgent Treat", "icon": "indulgent_treat" } }, { "y": 42.1, "x": 14, "xLabel": { "label": "Quality", "icon": "quality" } }, { "y": 35.9, "x": 15, "xLabel": { "label": "Refreshing", "icon": "refreshing" } } ] }, { "name": "Benchmark Group", "data": [ { "y": 40.5, "x": 0, "xLabel": { "label": "Premium", "icon": "premium" } }, { "y": 63.5, "x": 1, "xLabel": { "label": "Tasty", "icon": "tasty" } }, { "y": 23, "x": 2, "xLabel": { "label": "Good Value", "icon": "good_value" } }, { "y": 27.2, "x": 3, "xLabel": { "label": "Exciting", "icon": "exciting" } }, { "y": 33.5, "x": 4, "xLabel": { "label": "Fun", "icon": "fun" } }, { "y": 29.7, "x": 5, "xLabel": { "label": "Appealing Packaging", "icon": "appealing_packaging" } }, { "y": 36.3, "x": 6, "xLabel": { "label": "Natural", "icon": "natural" } }, { "y": 32.7, "x": 7, "xLabel": { "label": "Environmentally Friendly", "icon": "environmental" } }, { "y": 44.8, "x": 8, "xLabel": { "label": "Trustworty Brand", "icon": "trustworthy" } }, { "y": 43.9, "x": 9, "xLabel": { "label": "Unique", "icon": "unique" } }, { "y": 36, "x": 10, "xLabel": { "label": "Convenient", "icon": "convenient" } }, { "y": 44.2, "x": 11, "xLabel": { "label": "Filling", "icon": "filling" } }, { "y": 31, "x": 12, "xLabel": { "label": "Healthy", "icon": "healthy" } }, { "y": 49.7, "x": 13, "xLabel": { "label": "Indulgent Treat", "icon": "indulgent_treat" } }, { "y": 31.7, "x": 14, "xLabel": { "label": "Quality", "icon": "quality" } }, { "y": 42.1, "x": 15, "xLabel": { "label": "Refreshing", "icon": "refreshing" } } ] } ], "palette": "blueOrange", "colors": [ "#026fd9", "#e66723" ], "noData": { "style": { "textAlign": "center" }, "useHTML": true } }

RaviMintel07 commented 1 day ago

Hey , I tried passing base64 code instead of the actual svg image code , seems its working fine but only few images are getting render , below is the snap , any idea why ?

Screenshot from 2024-11-14 11-37-06