CODEWITHSUNDEEP
plothighcharts
Alberto Fontana
Alberto Fontana

Reputation: 948

How to set plot area width and height in Highcharts?

I'm plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.

Thus, i've set the chart height and width at the same value:

$(function () {
    $('#map-container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            height: 225,
            width: 225
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        yAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lat_bon_min; ?>,
            max: <?php echo $lat_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        xAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lon_bon_min; ?>,
            max: <?php echo $lon_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 2
                }
            }
        },

        series: [{
            showInLegend: false,  
            type: 'scatter',
            color: 'rgba(223, 83, 83, .5)',
            data: map_data,
            keys: ['time', 'x', 'y']
        }]

    });
});

The problem is that the chart container is a square, but the plot area is not.

I made a screenshot of the result. Red line is the map, black square is the chart container (which is a perfect square), blue rectangle is the plot area which you can see is not a square.

enter image description here

How can i set plot area size in order to make it a perfect square?

Upvotes: 7

Views: 19059

Answers (3)

Nikita Yuzhakov
Nikita Yuzhakov

Reputation: 1

You might want to use marginLeft, marginRight, marginTop and marginBottom properties.

The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)

See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style

Upvotes: 0

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can extend Highcharts with new function. Here you can find information about extending Highcharts: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:

chart: {
  plotAreaWidth: 300,
  plotAreaHeight: 200
},

Function is also positioning your plot area in the middle of chart container.

example: http://jsfiddle.net/izothep/eph5secj/2/

Upvotes: 6

Kacper Madej
Kacper Madej

Reputation: 7886

In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).

Example: http://jsfiddle.net/5825mzLs/

Upvotes: 1

Related Questions