0

I am trying to achieve a non-functional color picker circle (just visual existence) in HighCharts.

I have been able to create circles with plain colors (JsFiddle: http://jsfiddle.net/amigoo/zwod86e1/)

HTML:

<div id="container1" style="display:inline-block;"></div>

JS:

$(function() {
        Highcharts.setOptions({
            colors: ['#8edce7', '#e8ebeb']
        });

        // Create the chart for completion
        var chart_completion = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                type: 'pie',
                margin: [0,0,0,0],
                height: 100,
                width: 100

            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                pie: {
                    slicedOffset: 0,
                    size: '100%',
                    dataLabels: {
                        enabled: false
                    }
                },
                series: noBorder
            }, 
            title: {
                text: 'In Prog.',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }

            },      
            credits: {
               enabled: false
            },
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                },
                point : {
                    events: {
                        mouseOver: function(){
                           this.oldTitle = chart_completion.options.title.text;

                           chart_completion.setTitle({
                                text: 'New title '
                            });

                        },
                        mouseOut: function(){
                            chart_completion.setTitle({
                                text: this.oldTitle
                            });
                        }
                    }
                }
            }]
        });

However struggling to make the plain color go in gradients to make it look like this:

enter image description here

Any thoughts?

Faisal Ashfaq
  • 2,545
  • 4
  • 28
  • 41
  • What you seem to be looking for is called conical gradients and it is a very tricky thing. I would personally recommend SVG or Canvas but it is not impossible with CSS either. Have a look at [this thread](http://stackoverflow.com/questions/31247310/circle-loading-animation/31250354#31250354) and it will give you ideas. – Harry Sep 17 '15 at 05:35
  • Thanks but I'd rather stick with placing image than diving into such complications. – Faisal Ashfaq Sep 17 '15 at 05:38
  • That's entirely your wish. I have no say there. I linked that thread only because the title indicated CSS gradients. – Harry Sep 17 '15 at 05:40
  • I really appreciate that! I am taking a deeper look on that link already – Faisal Ashfaq Sep 17 '15 at 05:43
  • 1
    You can try to use radial-gradient with multiple stops. http://www.highcharts.com/docs/chart-design-and-style/colors – Sebastian Bochan Sep 17 '15 at 08:58

0 Answers0