CODEWITHSUNDEEP
chartshighcharts
user979189
user979189

Reputation: 1298

stepped color shading in highcharts doughnut chart

I need to create a chart like this using highcharts - This chart is created using some other charting tool and this specific chart type is called step chart.

enter image description here

Basically what i need to do is for all different categories in the chart displayed above like Efficiency, Mortality etc., they can have different values like 1%, 7%, 51% etc. And i need to create a shading which will have color codes and will be displayed in scale like image with color code variation upto the accuracy of 1% value for each category. This means the color code in chart for Efficiency with value of 5% will be different from Mortality with value of 6%. Is this kind of dynamic color shading available in highcharts?

Please keep in mind that i need to replicate the exact looking chart with scale and color coding using highcharts. I also need to apply some aggregation logic and come up with overall score and highlight the overall score value in color scale with some king of marker as you can see in the image.

Thanks for any help you can provide.

Upvotes: 0

Views: 1539

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

I'm not sure about aggregation etc, but seems quite easy - just calculate that values before passing data to the chart. Anyway, it looks like colors don't suit values on the pie. For example: Safety is 17%, but it's green. For me it should be red? I assume that 50% is white/grey (middle) on the color axis, so all values should be reddish. Or maybe 17% od 25% defines color, not percentage of the pie.

Anyway, I think the biggest challenge is to adapt colorAxis from heatmap. Let me help you with that: http://jsfiddle.net/w9nuha8n/1/

(function (H) {
    // add colorAxis
    H.seriesTypes.pie.prototype.axisTypes = ['colorAxis']; 
    H.seriesTypes.pie.prototype.optionalAxis = 'colorAxis';

    // draw points and add setting colors
    H.wrap(H.seriesTypes.pie.prototype, "translate", function (p, positions) {
        p.call(this, positions);
        this.translateColors();
    });

    // copy method from heatmap for color mixin
    H.seriesTypes.pie.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors; 

    // use "percentage" or "value" or "custom_param" to calculate color
    H.seriesTypes.pie.prototype.colorKey = 'percentage';
})(Highcharts);

As you can see, you can set some customized parameter for a pie chart to colorize slices, I guess that will be helpful, for example: http://jsfiddle.net/w9nuha8n/2/ (y sets value, but myParam is used to define colors).

Just an extra note: It's Highcharts, not your second library, so not everything will look exactly the same way as you have in your image. But will be possible to achieve using Renderer (for example top/bottom dotted lines).

Upvotes: 1

Related Questions