CODEWITHSUNDEEP
highchartsword-cloud
Shashish Chandra
Shashish Chandra

Reputation: 499

Text Gradient Highcharts Wordcloud

Wordcloud-highcharts is now available in its latest release (>=6.0) and now I am baffling with laying out the gradient (linear/radial) over texts. For example in this link, if I change the colors array in the series object to 

    fillColor: {
        linearGradient: [0, 0, 0, 200],
      stops: [
        [0, 'white'],
        [1, 'black']
      ]
    },

It does nothing.

Wordcloud has limited functionality and however I am unable to do accomplish this task. Even tried appending multiple defs for different text gradients with (k is such that, it lies between 0 to n)

    <defs>
<radialGradient id="myRadialGradient_k"
   fx="5%" fy="5%" r="65%"
   spreadMethod="pad">
  <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
  <stop offset="100%" stop-color="#006600" stop-opacity="1" />
</radialGradient>
</defs>

and searching for the class and apply css to fill with this myLinearGradient_k by fill:url(#myLinearGradient_k);. But it is very clumsy and heavy. Also search by id is not possible in this case and appending to class highcharts-point is the only possibility, which limits the options.

Upvotes: 1

Views: 814

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

You may find this live demo helpful: http://jsfiddle.net/kkulig/mnj07vam/

In chart.events.load I placed the code responsible for finding maximum weight, creating gradients (every point has a separate one) and applying them:

  chart: {
    events: {
      load: function() {
        var points = this.series[0].points,
          renderer = this.renderer,
          maxWeight = 0;

        // find maximum weight   
        points.forEach(function(p) {
          if (p.weight > maxWeight) {
            maxWeight = p.weight;
          }
        });


        points.forEach(function(p, i) {
          var id = 'grad' + i;


          // create gradient
          var gradient = renderer.createElement('linearGradient').add(renderer.defs).attr({
            id: id,
            x1: "0%",
            y1: "0%",
            x2: "100%",
            y2: "0%"
          });

          var stop1 = renderer.createElement('stop').add(gradient).attr({
            offset: "0%",
            style: "stop-color:rgb(255,255,0);stop-opacity:1"
          });

          var stop2 = renderer.createElement('stop').add(gradient).attr({
            offset: Math.round(p.weight / maxWeight * 100) + "%",
            style: "stop-color:rgb(255,0,0);stop-opacity:1"
          });

          // apply gradient
          p.update({
            color: 'url(#' + id + ')'
          }, false);

        });
        this.redraw();
      }
    }
  }

API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement

Upvotes: 2

Related Questions