Charts Style CSS
Discussion

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:

https://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, https://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

Hi Ivan Paul

How to Title Style Like this

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.