Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id='debug'>

</div>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

CSS

#debug {
    white-space: pre;
}

JavaScript

Highcharts.Chart.prototype.render = function() {
    var chart = this,
        axes = chart.axes,
        renderer = chart.renderer,
        options = chart.options,
        tempWidth,
        tempHeight,
        redoHorizontal,
        redoVertical,
        each = Highcharts.each;

    // Title
    chart.setTitle();


    // Legend
    chart.legend = new Highcharts.Legend(chart, options.legend);

    // Get stacks
    if (chart.getStacks) {
        chart.getStacks();
    }

    // Get chart margins
    chart.getMargins(true);
    chart.setChartSize();

    // Record preliminary dimensions for later comparison
    tempWidth = chart.plotWidth;
    // 21 is the most common correction for X axis labels
    // use Math.max to prevent negative plotHeight
    tempHeight = chart.plotHeight = Math.max(chart.plotHeight - 21, 0);

    // Get margins by pre-rendering axes
    each(axes, function(axis) {
        axis.setScale();
    });
    chart.getAxisMargins();

    // If the plot area size has changed significantly, calculate tick
    // positions again
    redoHorizontal = tempWidth / chart.plotWidth > 1.1;
    // Height is more sensitive, use lower threshold
    redoVertical = tempHeight / chart.plotHeight > 1.05;

    if (redoHorizontal || redoVertical) {

        each(axes, function(axis) {
            if (
                (axis.horiz && redoHorizontal) ||
                (!axis.horiz && redoVertical)
            ) {
                // update to reflect the new margins
                axis.setTickInterval(true);
            }
        });
        chart.getMargins(); // second pass to check for new labels
    }

    // Draw the borders and backgrounds
    chart.drawChartBox();


    // Axes
    if (chart.hasCartesianSeries) {
        each(axes, function(axis) {
            if (axis.visible) {
                axis.render();
                // Disable 'isDirty' flag for invisible axes
            } else {
                axis.isDirty = false;
            }
        });
  ...