Why does my Highchart look different when I transfer my code from Jsfiddle to my server?

Question

I took my exact code from Jsfiddle and added it to the code on my server. The graph plots but it formats in a strange way. There are no console errors.

Here's an image showing how the chart appears on my website: Image

And here's the JSfiddle (the way it SHOULD look):http://jsfiddle.net/smq59yf9/33/

CODE:

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.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="ContainerGraph1" style="width: 500px; height: 400px; margin: 0 auto"></div>

JAVASCRIPT

Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (proceed, lineWidth) {
    var axis = this,
        path = proceed.call(this, lineWidth),
        x = path[1],
        y = path[2];

    Highcharts.each(this.breakArray || [], function (brk) {
        if (axis.horiz) {
            x = axis.toPixels(brk.from);
            path.splice(3, 0,
                'L', x - 4, y, // stop
                'M', x - 9, y + 5, 'L', x + 1, y - 5, // left slanted line
                'M', x - 1, y + 5, 'L', x + 9, y - 5, // higher slanted line
                'M', x + 4, y
            );
        } else {
            y = axis.toPixels(brk.from);
            path.splice(3, 0,
                'L', x, y - 4, // stop
                'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
                'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
                'M', x, y + 4
            );
        }
    });
    return path;
});

/**
 * On top of each column, draw a zigzag line where the axis break is.
 */
function pointBreakColumn(e) {
    var point = e.point,
        brk = e.brk,
        shapeArgs = point.shapeArgs,
        x = shapeArgs.x,
        y = this.translate(brk.from, 0, 1, 0, 1),
        w = shapeArgs.width,
        key = ['brk', brk.from, brk.to],
        path = ['M', x, y, 'L', x + w * 0.25, y + 4, 'L', x + w * 0.75, y - 4, 'L', x + w, y];

    if (!point[key]) {
        point[key] = this.chart.renderer.path(path)
            .attr({
                'stroke-width': 2,
                stroke: point.series.options.borderColor
            })
            .add(point.graphic.parentGroup);
    } else {
        point[key].attr({
            d: path
        });
    }
}

Highcharts.chart('ContainerGraph1', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },

    xAxis: {
     lineColor: 'black',
        lineWidth: 2,
                title: {
            text: 'Temperature (°C)'
        }

    },
    yAxis: {
     lineColor: 'black',
        lineWidth: 2,
        breaks: [{
            from: 1,  //adds break 
            to: 3
        }],

        title: {
            text: 'Temperature (°C)'
        }
    },
    credits: {
      enabled: false
  },
  exporting: { enabled: false },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: false
        }
    },
     legend: {
            enabled: false // hides legend 
        },
    series: [{
        name: 'Tokyo',
         color: '#000000',
        data: [[1999,7],[2000,8], [2001,10], [2002,12], [2003,27]  ]
    }, {
        name: 'London',
        data: [[1999,6]], // include if want to keep break 
         color: '#ffffff'
    }]
});

If anyone has any idea as to why it would format this way, I would greatly appreciate it. Thanks!

First of all, there seems to be an encoding problem with your local files. That's why the º symbol in ºC shows as a question mark. [Check how to change de encoding of your file](https://stackoverflow.com/questions/132318/how-do-i-correct-the-character-encoding-of-a-file). About the other problem with the lines, that's a little more harder... Do you have any other CSS on your page or something? You would have to inspect the drawn chart to see where is that coming from... — João Menighin, Apr 17 '18 at 11:09
It seems that for some reason parameters like `gridLineWidth`, `gridLineColor`, `marker.fillColor` and `marker.lineColor` have different values on your server. I recreated that in fiddle: http://jsfiddle.net/BlackLabel/4hprcxhm/ — Kamil Kulig, Apr 17 '18 at 11:12
@KamilKulig Thank you so much for responding, Kamil & Joao! I discovered that, by chance, I had used some of the same variables from other portions of the code in my CSS and that was messing with the formatting. (The symbol I already understood.) — BlahBlahBloo, Apr 18 '18 at 01:14

score 0 · Answer 1 · answered Apr 18 '18 at 01:16

0

Always check CSS...I had used some of the same variables elsewhere in my code and it messed up the formatting of the Highchart.

answered Apr 18 '18 at 01:16

BlahBlahBloo

37
4

Why does my Highchart look different when I transfer my code from Jsfiddle to my server?

1 Answers1