javascript - Ändra bredden på y-axelns etikettområde i jqplot


Okej, jag har ett stapeldiagram. Och det fungerar i princip... men etiketterna på y-axeln är ganska långa och radbryts och går sedan in i varandra.

Jag har försökt ändra CSS, men den blir överskriven av JS. Jag försökte skanna igenom jqplot-biblioteket för att ta reda på var det händer men jag gick vilse. Några idéer? Finns det bara ett alternativ jag kan ställa in?

Du kan se här:

Här är min html-fil:

<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
    $(function() {
        graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
    });
    function graph_me(div_name, labels_in, values_in) {
        var labels = labels_in.reverse();
        var values = values_in.reverse();
        $.jqplot(div_name, [values], {
            series:[{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal',
                    varyBarColor: true
                    }
                }
            ],
            axes: {
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer, 
                    ticks: labels,
                    tickOptions: {
                        showGridline: false,
                        markSize: 0
                    }
                }
            }
        });
    }
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>

Svar #1

Du kan prova detta i din css:

.jqplot-yaxis {
  margin-left:-80px !important;
  width:80px !important;
}