Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
RaviMintel07 opened this issue Nov 13, 2024 · 3 comments
Open

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

RaviMintel07 opened this issue Nov 13, 2024 · 3 comments
Labels
needs reproduction

Comments

@RaviMintel07
Copy link

RaviMintel07 commented Nov 13, 2024 •
edited by ddragula
Loading

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
Copy link
Author

RaviMintel07 commented Nov 14, 2024 •
edited
Loading

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

@jszuminski
Copy link
Contributor

Hi @RaviMintel07, thanks for reporting!

Could you please reproduce this demo in JSFiddle? I've copied your config and I can't see your icons: https://jsfiddle.net/BlackLabel/tc7qjo39/

@AndrzejBuleczka
Copy link

Link to the reproduction of the same issue available here: https://www.highcharts.com/forum/viewtopic.php?p=196136#p196136

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs reproduction
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@AndrzejBuleczka @jszuminski @RaviMintel07