Hi, I'm trying to style my donut chart on mobile to look like this:

1. Title in center (will be changed by filter option)

2. Title styled

3. Legend below in a more user friendly style

The problem is that I am not able to select the labels as in example:

http://jsfiddle.net/1eu7n4xk/



Until now I succed in showing the percentage, even not in the way above, in the AdvanceFormat

SyntaxEditor Code Snippet

legend: {
        labelFormatter: function() {
            return this.name + ' (' + Highcharts.numberFormat(this.percentage, 2) + '%)';
        }
    }



Questions:

1. How can I style my legend?

2. How could I center my title? (if there are more categories, the position will change)

3. How could I change the title after filtering?

Hi Ivan,


What you want is possible, maybe you need add some CSS. Highcharts is very powerful and have a lote of options.


I changed the Fiddle, http://jsfiddle.net/jqpzy1g3/ I hope I helped you.. but I cant do all changes.. Read the Highcharts documentations, There are many options you can use, but I can not search for you.

Hi Paulo,

Sorry for late response. For unknown reason I couldn't change my donut chart. 

SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"
    plotOptions: {
        pie: {
            size: '100%',
            innerSize: '20%',
            minPointLength: 3
        },
        series: {
            minPointLength: 3
        }
    },
    legend: {
        labelFormatter: function() {
            return this.name + '~' + Highcharts.numberFormat(this.percentage, 2) + '%' ;
        }
    }
")


The legend does what it need to do, but the innerSize is not responding. (I've set it to "innerSize: 200" but no changes).

For the legend to look alike my image I've used javascript and not HighChart properties.


Hi Ivan,

I'm happy to get the legend as you want :)

Relative to the graph, if you try change the size, and others parameters, the graphic respond?

Paulo Cação wrote:

Hi Ivan,

I'm happy to get the legend as you want :)

Relative to the graph, if you try change the size, and others parameters, the graphic respond?


If I try to change the legend for example, it's responsive