Google Pie chart with Custom Legend (Large Legend Without Pagination)

• Download sample code - 2 KB

Introduction

While adding Google charts in web page, most of us have noticed that if number of legends are large, then chart will show you pagination for legends. But in some cases, pagination for legends is not much useful for us. For example, if you are exporting chart HTML to any other format like PDF, then you are not able to show full legend in exported content. This article will help you to create simple customised HTML legends for Google pie chart. You can modify and use it as per your needs and chart type.

Using the Code

I have added one separate div element for legend exactly below the chart div element. You can plave it anywhere as per your needs. 

// <div id="chartLegend" class="legendMain"></div>

my.js is having code for creating legends and bind chart. In my.js, 'chartLegend' function is created for custom legends, which has two parameters of type array, one for chart data and one for colors. 

// function chartLegend(chartData,colorsArray)

In this function, legend elements are created using custom HTML objects created in funcion. 

We are creating separate div for number of legend elements with respect to container width so that we can center align them.

// var $divOuter = $("<div>", {id: "legendOuter"+i, 
// "class": "legendOuter","title":((chartData[i][1] / totalVal) * 100 ).toFixed(1) + " %"});

Please refer to the attached sample code for further reference and actual integration.

For any suggestions and modifications, please write in comments.