ChartJS - ignore labels - charts

Question

I am using ChartJS and need a chart like this: https://tppr.me/OE08p
Meaning it should ignore 4 of the labels (flexibility, external, stability, internal) and connect the dots from the other 4 labels (like the red lines show on the screenshot).
Can I ignore these 4 labels data-wise somehow, but keep them?
Other chart packages/solutions are welcome, if it is not possible in chartjs.

Answer 1

You can use highchart.js library, see:
docs: https://www.highcharts.com/docs/chart-and-series-types/polar-chart
example: https://www.highcharts.com/demo/polar-spider
with these options:
plotOptions: {
series: {
connectNulls: true
}
}
and filtering data with map function like below (just for example):
data.map(filter)
<omissis>
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
here is a jsfiddle showing this approach: http://jsfiddle.net/beaver71/w6ozog1c/
or a snippet here:
// original data
var data1 = [43000, 19000, 60000, 35000, 17000, 10000],
data2 = [50000, 39000, 42000, 31000, 26000, 14000];
var chart = Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: data1.map(filter), // filtered data
pointPlacement: 'on',
color: 'red'
}, {
name: 'Actual Spending',
data: data2,
pointPlacement: 'on',
color: 'green'
}],
plotOptions: {
series: {
lineWidth: 2,
connectNulls: true // connects also null value (bypassing)
}
}
});
var filterOn = true;
$('#button').click(function () {
filterOn = !filterOn;
if (filterOn)
chart.series[0].setData(data1.map(filter));
else
chart.series[0].setData(data1);
});
// filter function with your criteria
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
.highcharts-grid-line {
stroke-width: 2;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Toggle filter (ignoring a point in red serie)</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>