CODEWITHSUNDEEP
javascriptjqueryhighcharts
Markus Hay
Markus Hay

Reputation: 1010

Highcharts - Force plot lines to consume available width?

Our designers have requested that our stacked area charts are rendered such that the plot lines consume 100% of the available chart width as opposed to starting/stopping at the first/last tick marks. Here is a mockup provided by our designers that illustrates what we're trying to achieve:

http://oi50.tinypic.com/25s2bzm.jpg

Currently the chart renders as follows, noting that the plot lines do not consume the width of the chart:

http://jsfiddle.net/8pmVK/

$(function () {
var chart;
$(document).ready(function() {
    Highcharts.setOptions({
        colors: ['#1FA5FF', '#9BD237', '#E6673B']
    });
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area'
        },
        title: {
            text: null
        },
        exporting: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Mar 2012', 'Apr 2012', 'May 2012', 'Jun 2012', 'Jul 2012', 'Aug 2012', 'Sep 2012'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null
            }
        },
        plotOptions: {
            area: {
                fillOpacity: 0.3,
                stacking: 'normal',
                lineWidth: 3,
                marker: {
                    lineWidth: 3,
                    enabled: false
                }
            }
        },
        series: [{
            name: 'John',
            data: [30, 26, 18, 35, 30, 28, 40, 31]
        }, {
            name: 'Jane',
            data: [40, 35, 37, 33, 30, 42, 30, 26]
        }, {
            name: 'Bob',
            data: [26, 33, 28, 20, 35, 33, 35, 20]
        }]
    });
});

I've looked through the API and searched around but I didn't find (or perhaps missed) which option I have to set to achieve this assuming it's even possible. Thanks in advance for any help.

UPDATE: The solution is to set the min and max properties of xAxis, so I updated the above to reflect this. However this truncates the chart data as it excludes the first and last data points, so to get around that I'm adding dummy values to the the categories and series.data arrays, noting that data is an object that I get back via Ajax to build the chart:

data.categories.unshift('');
data.categories.push('');
for (var i = 0, len = data.series.length; i < len; i++) {
    data.series[i].data.unshift(0);
    data.series[i].data.push(0);
}

The min/max on the xAxis are then set as follows:

xAxis: {
    min: 1,
    max: data.categories.length - 2 // 2nd to last index
}

Upvotes: 1

Views: 823

Answers (3)

Rick Savoy
Rick Savoy

Reputation: 341

I am sure the above project has been completed but one can also use Highstocks in place of Highcharts (same license) and add a scroll bar as here: [http://jsfiddle.net/8pmVK/]. 

        scrollbar: {
            enabled: true
        },

Also, Highstock includes all the functionality of Highcharts .

Upvotes: 0

jlbriggs
jlbriggs

Reputation: 17800

You can use decimals in your min and max values.

In your case, a min of 0.5 and a max 6.5 appear to do the trick: http://jsfiddle.net/jlbriggs/8pmVK/2/

min:0.5,
max:6.5,

Using whole numbers will always either leave space or truncate. This can be done dynamically if needed by calling getExtremes(), adjusting the min and max accordingly, and calling setExtremes()

Upvotes: 0

Luca
Luca

Reputation: 4273

You need to find right min/max for your xAxis. In your example:

xAxys: {
 ...
 min: 1,
 max: 5
}

Upvotes: 1

Related Questions