CODEWITHSUNDEEP
javascripthighcharts
Ireally Rock
Ireally Rock

Reputation: 236

Highcharts bar and line issue

I am using highcharts to create a bar and line chart to show the difference between budget and actual

The issue I am getting is that when i make the spline chart with the bar the points don't seem to have any relevance to where they should be. so for Feb, budget is 20.9 but the bar is showing above 30.

All the bars (columns) seem to be way to high for where they should be even though in the tooltip it is showing the correct data

http://jsfiddle.net/ktcle/kSLGL/

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: null
        },

        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}£m',
                style: {
                    color: '#666666'
                }
            },
            title: {
                text: null,
                style: {
                    color: '#45C2C5'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Budget',
                text: null

            },
            labels: {
                 enabled: false
            },
            opposite: true,

        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 170,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Budget',
            color: '#4A3950',
            type: 'column',
            yAxis: 1,
            data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5],
            tooltip: {
                valueSuffix: '£'
            }

        }, {
            name: 'Actual',
            color: '#45C2C5',
            type: 'spline',
            data: [24.5, 22.5, 30 ],
            tooltip: {
                valueSuffix: '£'
            },

            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }]
    });

});

Upvotes: 1

Views: 456

Answers (1)

R3tep
R3tep

Reputation: 12854

Because you have two y axis, remove the second y axis and in the series remove the property yAxis: 1 or changing by yAxis: 0

Jsfiddle

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: null
    },

    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}£m',
            style: {
                color: '#666666'
            }
        },
        title: {
            text: null,
            style: {
                color: '#45C2C5'
            }
        }
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 170,
        floating: true,
        backgroundColor: '#FFFFFF'
    },
    series: [{
        name: 'Budget',
        color: '#4A3950',
        type: 'column',
        yAxis: 0,
        data: [23.9, 20.9, 22.7, 23.8, 25.7, 23.3, 26.7, 23.4, 26.8, 27.5, 25.5, 26.5],
        tooltip: {
            valueSuffix: '£'
        }

    }, {
        name: 'Actual',
        color: '#45C2C5',
        type: 'spline',
        data: [24.5, 22.5, 30 ],
        tooltip: {
            valueSuffix: '£'
        },

        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]
});

});

Upvotes: 1

Related Questions