简体   繁体   中英

BarChart does not fit on chart area

By using the code below, the X axis maximum value is only 85000 and that hides the partly the 120k value, Is there any option to fix this axis rendering behavior?

var s1 = ["84486", "74987", "120249"];
var ticks = ['Length', 'Width', 'Height'];

$.jqplot('revi_chart', [s1], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'w'},
        rendererOptions: { barDirection: 'horizontal'},
    },
    axes: {
        xaxis: { tickOptions: { showLabel: true, showGridline: false}},
        yaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks,
        tickOptions: { showGridline: false }}
    },
    highlighter: { show: false}
});

Here is the Fiddle: http://jsfiddle.net/frelis/x7Lyj5t6/12/

You can set the max value on the XAxis like that :

axes: {
        xaxis: { tickOptions: { showLabel: true, showGridline: false},
     max:200000},
        yaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks,
            tickOptions: { showGridline: false }}
    },

http://jsfiddle.net/Tintin37/dox289ea/

You can get the max value of your array and set the max axis value like this too :

var maxVal = Math.max.apply(null, s1);

xaxis: { tickOptions: { showLabel: true, showGridline: false},
         max: maxVal +10000},

http://jsfiddle.net/Tintin37/7ntw19Lp/

Have a good day !

Make s1 an array of numbers. It expects numbers on the X axis. Change the code from:

var s1 = ["84486", "74987", "120249"];

to

var s1 = [84486, 74987, 120249];

see the working version at: http://jsfiddle.net/x7Lyj5t6/13/

This way X axis will always be automatically setting the maximum value.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM