javascript - Gradient effect with graddually fill in Highchart gauge

Question

I'm planning to create a dashboard for my web application, I have some data to represent graphically so to show that planning to use you Activity Gauge (http://www.highcharts.com/demo/gauge-activity) and other charts. But as per our requirement we need to create these graphs with gradient effect with gradually fill effect with two or more than two colors, see the attached dashboard mockup for better understanding our thought. I have done our best effort to make with Highchart Linear gradients and Radial gradients but logically it seems not possible.

I have done some changes as per and I am able to make design like - http://jsfiddle.net/td2v4u4z/29/ but I lost gradually effect on this.

here is my original graph - http://jsfiddle.net/td2v4u4z/26/

I want to make this exactly like this -

Also, is this possible to place label inside the circle as per the below image -

My sample graph is - http://jsfiddle.net/qambxkmo/13/

Please let us know how can we achieve these design with Highchart.

Thanks in advance!

Answer 1

I am not sure what do you mean by 'gradually fill effect', but I think that you may wonder about an initial animation on your chart.

You can change the function responsible for making your gradient a little bit to achieve the chart with an initial animation. I am sending you this chart below:

http://jsfiddle.net/td2v4u4z/31/

If you think that is a good idea to have a functionality of simple adding similar gradient to your gauge, I think that you can ask for this feature on Highcharts uservoice. The best ideas (with biggest number of votes) gets to be implemented in future Highcharts versions.

https://highcharts.uservoice.com/

In case of the second question you have asked, I think that you should be able to add custom function for rotating your dataLabels, so they will be inside your donut chart:

rotate = function() {
  $.each(options.series, function(i, p) {
    angle1 = 0;
    angle2 = 0;
    angle3 = 0;
    allY = 0;
    $.each(p.data, function(i, p) {
      allY += p.y;
    });
    $.each(p.data, function(i, p) {
      p.dataLabels = p.dataLabels || {};
      angle2 = angle1 + p.y * 360 / (allY);
      angle3 = angle2 - p.y * 360 / (2 * allY);
      if (angle3 >= 180) {
        p.dataLabels.rotation = 0 + angle3;
      } else {
        p.dataLabels.rotation = 0 + angle3;
      }
      angle1 = angle2;
    });
  });
};

I have made simple example how it can work: http://jsfiddle.net/j7as86gh/31/