CODEWITHSUNDEEP
javascriptcsschartschart.jschart.js2
CMOS
CMOS

Reputation: 2917

Chart.js V2 formatting / styling labels

So in version 1 of chart.js we could use legendTemplates to format and style where and how the labels of a chart showed up. However since switching to v2 I cannot seem to find an equivilant. See my example below of a pie chart with the labels way to condensed. enter image description here

Ideally I would be able use some form option to move, spread out or otherwise style these labels.

Here is an example of the old legend template I used 

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend text-center\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label.capitalizeFirstLetter()%><%}%></li><%}%></ul>"

Upvotes: 1

Views: 3819

Answers (1)

Tot Zam
Tot Zam

Reputation: 8746

You can configure the legend using the config options section, as explained here: http://www.chartjs.org/docs/latest/configuration/legend.html

Example:

var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        legend: {
            position: 'left',
            labels: {
                boxWidth: 15,
                padding: 20
            }
        }
    }
})

This code will move the legend to the left side of the chart, will make the colored boxes smaller, and will increase the amount of whitespace between the legend items.

Working JSFiddle: https://jsfiddle.net/o81qqrLn/1/

You can view a full list of configurable legend and label options is the documentation linked above.

Upvotes: 2

Related Questions