Here are my original chartOptions:
Code: Select all
chartOptions: {
title: {
text: ""
},
yAxis: {
type: 'category',
categories: ['EL Status', 'Parent Permission', 'Program', 'Interrupted Formal Education'],
min: 0,
max: 3
},
xAxis: {
tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
labels: {
format: '{value:%b}',
style: {
fontSize: '8px'
}
},
currentDateIndicator: { label: { format: 'Today'} }
},
tooltip: {
xDateFormat: '%m/%d/%Y',
headerFormat: null
},
navigator: {
enabled: true,
liveRedraw: true,
adaptToUpdatedData: false,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25
},
yAxis: {
min: 0,
max: 3,
reversed: true,
categories: []
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 6
},
series: [{
name: "stuData",
cursor: "pointer",
animation: true,
allowPointSelect: true,
point: {
events: {
drop: this.onDrop
}
},
dragDrop: {
draggableX: true,
draggableY: false, // cannot move between categories
dragPrecisionX: 1000 * 60 * 60 * 24 // Snap to day
},
dataLabels: [{
enabled: true,
format: '{point.name}',
align: 'center'
}],
// reordered default colors so that dark grey comes fourth instead of second
colors: ["#7cb5ec", "#f7a35c", "#90ed7d", "#434348", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"],
data: [{
name: "1",
id: "data_1",
start: Date.UTC(2019, 9, 8),
end: Date.UTC(2020, 10, 1),
y: 0,
// Disable dragging for this point
dragDrop: {
draggableY: false,
draggableX: false
}
},
{
name: "F",
id: "data_2",
start: Date.UTC(2020, 10, 2),
end: Date.UTC(2021, 5, 26),
y: 0
},
{
name: "Approved Bilingual",
id: "data_3",
start: Date.UTC(2019, 9, 8),
end: Date.UTC(2021, 5, 26),
y: 1
},
{
name: "DL One-Way",
id: "data_6",
start: Date.UTC(2019, 9, 8),
end: Date.UTC(2020, 10, 1),
y: 2
},
{
name: "DL Two-Way Mandarin",
id: "data_4",
start: Date.UTC(2020, 10, 2),
end: Date.UTC(2021, 5, 26),
y: 2
},
{
name: "Yes",
id: "data_5",
start: Date.UTC(2019, 9, 8),
end: Date.UTC(2020, 10, 25),
y: 3
}]
}]
}
}
}
Code: Select all
watch: {
studentId: function (newVal, oldVal) {
this.chartOptions.title.text = this.studentName + ' (' + this.studentId + ')'
},
studentName: function (newVal, oldVal) {
this.chartOptions.title.text = this.studentName + ' (' + this.studentId + ')'
}
},