Legend behaviour - CanvasJS

legend touching the right side of the canvas

by toubia95

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p class="description">Using a background color, the legend seems to touch the right side of the canvas. Could probably be fixed using CSS on the div container or adding space after legendText, but a padding option for the legend box would be nice too. Gilles.</p>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
        backgroundColor: "#F5F5F5",
        title: {
            text: "R\épartition des emplois par secteur d\'activit\é",
            fontColor: "#404040",
            fontSize: 16,
            fontWeight: "bold",
            verticalAlign: "top",
            horizontalAlign: "center",
            padding: 0,
            fontFamily: "'Helvetica Neue',Helvetica,Arial,sans-serif",
        },
        legend: {
            fontSize: 15,
            fontFamily: "'Helvetica Neue',Helvetica,Arial,sans-serif",
            fontColor: "#333333",
            horizontalAlign: "right",
            verticalAlign: "center",
        },
        data: [             
        { 
            type: "doughnut",
            startAngle: -90,
            showInLegend: true,
            name: "secteurs",
            indexLabel: "{y}%",
            indexLabelPlacement: "inside",
            indexLabelFontSize: 14,
            indexLabelFontColor: "white",
            indexLabelFontFamily: "'Helvetica Neue',Helvetica,Arial,sans-serif",
            indexLabelFontWeight: "bold",
            //indexLabelBackgroundColor: "black",
            legendMarkerType: "square", // "circle", "triangle"
            toolTipContent: "{label}<br/><b>{y}%</b>",
            dataPoints: [{
                label: "G\éotechnique<br/>et G\énie Civil",
                y: 33,
                legendText: "G\éotechnique et G\énie Civil"
            }, {
                label: "Mati\ères premi\ères<br/>\énerg\étiques<br/>et G\éologie num\érique",
                y: 21,
                legendText: "Mati\ères premi\ères \énerg\étiques"
            }, {
                label: "Recherche",
                y: 20,
                legendText: "Recherche"
            }, {
                label: "Mati\ères premi\ères<br/>min\érales",
                y: 16,
                legendText: "Mati\ères premi\ères min\érales"
            }, {
                label: "Eau<br/>et...