Search code examples
jquerychartsjqplot

If the chart is only one, it occupies the entire free space

I need to plot a graph in the form of horizontal charts showing some value in percentage. I made a charts, but there is one problem.

When on the graph a few charts they look normal. enter image description here

But when the chart only one, it occupies all the free space. enter image description here

How to make the chart look a little smaller, leaving place for the label?

And I think that if the value is 20%, as in the second screenshot, then the x-axis length should be more than 20%.

My code below

$.jqplot.config.enablePlugins = true;
window.charts = {};

if ($('#summaryChart').length > 0) {
    var minimal_data_charts = [];
    for (var i = 0; i < minimal_data.length && i < 10; i++) {
        minimal_data_charts[i] = [minimal_data[i].persent, i+1, minimal_data[i].passenger];
    }

    $('#summaryChart').css('font-size', '15px');
    window.charts.summaryChart = $.jqplot('summaryChart', [
        minimal_data_charts], {
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
            shadowAngle: 135,
            rendererOptions: {
                barDirection: 'horizontal'
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });

}
Solution 
  • axes: {
                xaxis: {
                    min: 0,
                    max: 110,
                    numberTicks: 12
                }

    Сode above solved my x-axis problem.

    Code below makes the chart a bit smaller by the y-axis

        rendererOptions: {
        barDirection: 'horizontal',
        barMargin: 50
    }

    But barMargin: 50 should be not always, if only one chart is displayed.