Highchart bar scaling

Question

I'd like to show data between 0 and 100%. The bar chart have 160px of width and I'd like to see just bar without any titles/legends. I got the data in range bitween 0 and x (for example from 0 till 700), and max value can be changed.

When max value less then 160 the bar looks correctly. But when max value more than 160 a chars scales current bar value incorectly.

Desirable result

http://jsfiddle.net/dvasuta/H6SJE/2/

What I have now http://jsfiddle.net/dvasuta/sXAeh/2/

$(function () {
    $('#container').highcharts({
        credits: {
            enabled: false,
        },
        chart: {
            renderTo: 'container',
            type: 'bar',
            marginBottom: 1,
            marginTop: 1,
            marginLeft: 1,
            marginRight: 1,
            borderRadius: 0,
            borderWidth: 1,
            borderColor: '#c5c6c7',
            backgroundColor: 0,
            height: 22,
            width:160
        },
        title: {
            text: null
        },
        xAxis: {
            tickWidth: 0,
            lineWidth: 0,
            gridLineWidth: 0,
            categories: 0,
            labels: {
                enabled: false
            }
        },
        yAxis: {
            tickWidth: 0,
            lineWidth: 0,
            gridLineWidth: 0,
            min: 0,
            max: 2500,
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        tooltip: {
            enabled: false,
            formatter: function () {
                return '';
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return '';
                    },
                    y: 0,
                    x: 0,
                    color: '#ff0',
                    style: {
                        fontSize: '18px',
                        fontFamily: 'bold Helvetica,Arial,sans-serif'
                    }
                }
            },
            series: {
                allowPointSelect: false,
                enableMouseTracking: false,
                groupPadding: 0,
                pointPadding: 0,
                borderWidth: 0,
                borderRadius: 0
            }
        },
        series: [{
            shadow: true,
            data: [2482],
            color: {
                linearGradient: [20, 20, 0, 20],
                stops: [
                    [0, '#B6D22D'],
                    [1, '#5C9135']
                ]
            }
        }]
    });
});

It seems the issue in chart.width parameter. But how can I set a chart width?

Answer 1

I think the parameter you need to try is 'endOnTick' on the y-axis:

endOnTick:false,

http://jsfiddle.net/46nMs/

http://api.highcharts.com/highcharts#yAxis.endOnTick

Also, you may want to turn of exporting (this is just a visual tweak, and doesn't affect the scaling of the bar).

Answer 2

try this LINK ChaRT LINK

1. Disabled exporting
2. borderWidth = 0