I can't get correctly dash line in my c3 chart when I use regions option. please, let me know how can I fix this phenomenon. I couldn't get any information from anywhere about this kind of problem... Here is my code
var chart = c3.generate({
data: {
types: {
firstWeekData: 'bar',
secondWeekData: 'bar',
thirdWeekData: 'bar',
fourthWeekData: 'bar',
fifthWeekData: 'bar',
monthData: 'line',
year: 'line',
refLine: 'line'
},
regions: {
'year': [{'end': 11}]
},
columns: [
["firstWeekData", 7.627, 5.766, 8.302, 6.261, 7.592, 5.663, 8.978, 6.627, 9.961, 7.557, 7.366, 7.281],
["secondWeekData", 7.087, 8.138, 8.058, 5.726, 9.218, 7.265, 8.307, 6.821, 12.687, 7.693, 7.12, 8.987],
["thirdWeekData", 7.363, 8.122, 8.157, 6.123, 8.702, 7.85, 9.103, 0, 7.127, 7.24, 6.699, 8.451],
["fourthWeekData", 7.204, 8.414, 7.718, 7.846, 7.342, 10.356, 4.648, 9.153, 7.359, 0, 5.834, 9.735],
["fifthWeekData", 0, 0, 7.871, 0, 0, 7.535, 0, 8.597, 7.633, 0, 7.61, 7.729],
["monthData", 7.309, 7.636, 7.992, 6.397, 8.293, 8.03, 7.784, 8.332, 8.171, 7.537, 7.037, 8.545],
["year", 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789],
["refLine", 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
],
},
point: {
r: function (d) {
// console.log('pointer d.id', d.id)
if (d.id === 'refLine' || d.id === 'year') return 0
return 5
},
show: true
},
bar: {
width: 8,
space: 0.1
},
axis: {
x: {
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
},
line: {
connectNull: true
}
});