Home > Software design >  Highcharts Line Chart populating without data lines
Highcharts Line Chart populating without data lines

Time:11-11

This chart worked for years with no issue and a few days ago I noticed the lines are not populating. Cannot find a fix here or on highcharts forums. Typically, when something is wrong with the javascript, nothing populates but in this case, everything populates but the lines and associated data.

Thank you in advance!

JSFiddle: https://jsfiddle.net/jstark/zf3ma5so/2/

$(function () {
$('#container101').highcharts({
    chart: {
        type: 'line',
        spacingBottom: 5,
        spacingTop: 15,
        spacingLeft: 35,
        spacingRight: 35
    },
    title: {
        text: 'Graduation Diploma Types Awarded by Year',
        style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "24px", "fontWeight":"bold"}
    },
    xAxis: {
        categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
        crosshair: true
    },
    yAxis: {
        min: '40',
        max: '60',
        title: {
            text: 'Percentage Awarded',
            style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '%',
        borderColor: 'gray',
        borderRadius: 10,
        shadow: false
    },
    credits: {
  enabled: false
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 0,
        itemMarginBottom: 20,
        itemStyle: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"}
    },
    series: [{
        name: 'Advanced/CCR/Honors Diploma',
        color: '#01a2d7',
        data: [46, 45, 48, 49, 50, 50, 52, 47, 49, 49, 50, 49],
        marker: {
                fillColor: '#FFFFFF',
                lineWidth: 2,
                lineColor: '#01a2d7'
            }
    }, {
        name: 'Standard Diploma',
        color: '#01519c',
        data: [51, 52, 51, 50, 50, 50, 48, 53, 51, 51, 50, 51],
        marker: {
                fillColor: '#FFFFFF',
                lineWidth: 2,
                lineColor: '#01519c'
            }
    }]
});

});

CodePudding user response:

The min/max properties on yAxis should be numbers instead of strings.

min: 40,
max: 60,

instead of

min: '40',
max: '60',
  • Related