Miguel Flores Miguel Flores - 1 month ago 7
Javascript Question

Chart points in wrong X value

I have 4 arrays to create a chart and everything it's fine just one issue, my maximum value is 21 and the point in the chart is positioned on xAxis 80 value, that's the only problem and I'm trying to solve it but nothing seems to work, here is my chart to show the



$(document).ready(function () {
$('#bt').click(function () {
draw();
});
});

function chart(arreglo, arreglo2, arreglo3, arreglo4) {
$('#Chart').highcharts({
title: {
text: 'Inspeccion Dimensional'
},
xAxis: {
},
yAxis: {
min: 0,
title: {
text: 'Resultados'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Diameter',
data: arreglo4.map(function (value) {
return Number(value);
})
}, {
name: 'Length',
data: arreglo3.map(function (value) {
return Number(value);
})
}, {
name: 'Width',
data: arreglo2.map(function (value) {
return Number(value);
})
}, {
name: 'Thickness',
data: arreglo.map(function (value) {
return Number(value);
})
}]
});
}

function draw() {
array4 = [4, 8, 13, 17, 21];
array3 = [3, 7, 12, 16, 20];
array2 = [2, 6, 11, 15, 19];
array1 = [1, 5, 9, 14, 18];

chart(array1, array2, array3, array4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="Chart">
</div>

<button id="bt">Click</button>




Answer

You have stacking enabled which causes that the points' values are added to the previous values.

plotOptions: {
        series: {
    //        stacking: 'normal'
        }
    },

example: https://jsfiddle.net/o73oycbv/