如何将自定义 CSS 添加到<a>带有链接的 highcharts.js 锚标签</a>

Question

I am attempting to an tag on the names of my categories to re-direct to a different page if the title is clicked on. At the moment my css class names aren't applying any styling. When inspecting element I see that the title I wrapped around in the tag has a class of "highcharts-anchor" I'm attempting to either override highcharts-anchor, or add custom css to it to display the look that I would like. I've attempted to add a color: red to highcharts-anchor but it has no effect to my graph.

Also in my second title, the anchor tag is only applied to the first line of text, I am attempting to have the entire 3 rows of text in "2. Most Sold Online Stores Using Facebook Advertisements" to be clickable, at the moment "Most Sold Online Stores Using" is the only text that is linking to another page.

Here is a code snippet of what I am attempting to do:

      xAxis: {
        categories: ['<a class="highcharts-anchor" href="google.com"> 1. Highest Sales. </a>', '2. <a class="anchor-text" href="google.com"> Most Sold Online Stores Using Facebook Advertisements </a>'],
        labels: {
          align: 'left',
          x: -180,
        }
      },


.anchor-text {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

.highcharts-anchor {
  color: red;
}

Here is a link to my jsfiddle https://jsfiddle.net/bs1o2yth/10/

Answer 1

You can simply use formatter to color and add anchor tags to your labels.

formatter function return the value of labels and other data. Just check which pos you want to color with and add your relevant anchor tag. pos will from 0 to 4 in your case as you have five labels only.

I have recreated your example and added anchor tags to all of the labels which you can click on and visit the href link.

Run snippet below to see it working.

 Highcharts.chart('container', { chart: { type: 'bar', marginLeft: 200 }, xAxis: { categories: ['1. Highest Sales.', '2. Sed pretium aliquet dapibus.', '3. Donec mollis sit amet elit.', '4. Donec mollis sit amet elit.', '5. Donec mollis sit amet elit.'], labels: { align: 'left', x: -180, formatter: function() { if (this.pos == 0) { return '<a href="https://google.com" style="fill: green;">' + this.value + '</a>'; } else if (this.pos == 1) { return '<a href="https://google.com" style="fill: #FF00FF;">' + this.value + '</a>'; } else if (this.pos == 2) { return '<a href="https://google.com" style="fill: blue;">' + this.value + '</a>'; } else if (this.pos == 3) { return '<a href="https://google.com" style="fill: yellow;">' + this.value + '</a>'; } else if (this.pos == 4) { return '<a href="https://google.com" style="fill: green;">' + this.value + '</a>'; } else { return this.value } } } }, plotOptions: { series: { dataLabels: { enabled: true, format: '{y} %' } } }, series: [{ data: [{ y: 5, color: "#00FF00" }, { y: 10, color: "#FF00FF" }, { y: 7, color: "blue" }, { y: 3, color: "yellow" }, { y: 7, color: "blue" }] }] });

 <script src="https://code.highcharts.com/highcharts.js"></script> <div class='col-md-6'> <div id="container"></div> </div>