mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi. My environment is Highcharts Vue. I have created a Gantt chart with a navigator. In my Vue methods, I am modifying the value of chartOptions.title.text. The new value is correctly reflected above my Gantt chart, but my navigator loses the config that I have given it. When I inspect my chartOptions, the values that I have set are still there. I start with all options available in the Zoom area and draggable endpoints on the navigator. After the problem, I only have 'YTD' and 'All' for Zoom options and the endpoints of the navigator are no longer draggable. Any ideas what is going wrong will be greatly appreciated.

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
          }]
        }]
      }
    }
  }
and here is the code that changes the chartOptions.title.text (fyi, moving out of 'watch' and into a button triggered method created the same result.):

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 + ')'  
	}  
  },
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi,
Thanks for contacting us!

Use class setTitle() references to set a new tittle for chart.
https://api.highcharts.com/class-refere ... e#setTitle

Or you can use chart.title.update to update title.
https://api.highcharts.com/class-refere ... itle#title

To make the changes take effect every time you refresh the chart, use chart.events.redraw
https://api.highcharts.com/highcharts/c ... nts.redraw

Live demo:
https://codesandbox.io/s/highcharts-vue ... rked-3pped

Let me know how are you doing with this, you can reach me any time.
Best regards.
Sebastian Hajdus
Highcharts Developer
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi Sebastian,

Thanks for your help. To clarify, are you saying that it is not valid to modify the title in the way that I was doing it? This is an important detail because I will be doing a lot of manipulation of the chartOptions from within the Vue methods of my component which contains the Gantt chart.

If this is the case, can you fill in the one last blank that I can't seem to find: how do I get hold of the chartOptions object while in a Vue method in order to execute a method such as 'setTitle'. I've tried setting a ref in the chart html, such as

Code: Select all

               <highcharts
   		    id='xxx-id'
   		    name='xxx-name' 
    		    :constructorType="'ganttChart'" 
    		    class="hc" 
    		    :options="chartOptions" 
    		    ref="xxx">
   		</highcharts>
I can find the ref within my methods as this.$refs.xxx, but I cannot find the method 'setTitle'. 'this' in this case is my component object which contains the highcharts Gantt chart.

Many thanks!
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

One other thought that I should have put in my prior post. The demo-v3 in the highcharts-vue repo on GitHub shows that you can change the title the way I did (line 93-96 of chart.vue) https://github.com/highcharts/highchart ... /Chart.vue

Code: Select all

  watch: {
    title (newValue) {
      this.chartOptions.title.text = newValue
    },
    ...
I'm still feeling like there is a bug here, but am happy to work-around it. However, having the title (and whatever other data I want to change) be recalculated every time redraw() is called will be very costly when drag/drop is being used.

Thanks again.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi,
Thanks for more details.

I change the title dynamically according to the code you found in the documentation and everything looks fine.
I enter the title in input and it changes live.

I tested on my example and I don't see the navigator losing its settings, in my opinion it is good.
Can you check this example?

Live demo:
https://codesandbox.io/s/highcharts-vue ... rked-6k7d9

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Thanks for sticking with me on this. The one notable difference between yours and mine is that I have the draggable-points library hooked in to allow the bars on the gantt to be repositioned. Could that be the reason?

Code: Select all

...
import DragDrop from 'highcharts/modules/draggable-points'
...
DragDrop(Highcharts)
I also see that your navigator is rendering differently than mine in spite of having the same chartOptions? On mine, data.name does not display over the bars in the navigator. Maybe a difference in versions? My highcharts version is 9.1.0, highcharts-vue is 1.4.0 and Vue is 2.6.12.

Thanks again.
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

I removed draggable-points and there was no change to the behavior.

I have written more of my code and am now resetting chartOptions.series[0].data with data retrieved from the server and this doesn't render either. I end up with a blank gantt. I've verified that the data is correctly formatted.
mmath
Posts: 10
Joined: Thu May 27, 2021 2:44 pm

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi Sebastien,
I did finally get it working, by just tinkering with options, etc. I'm not sure which combination of changes made the difference, but here are a few things that I did:
1. Because I was reloading my data in a 'watch' expression, I moved that code into its own async method and did an 'await' on that method from within the watch to be sure that everything completed before highcharts had a chance to re-render.
2. Something that I read in the api doc made me chose to set navigator.adaptToUpdateData to false. It is working correctly now with the value set to true.
3. Also in navigator.yAxis, I added 'categories: []'.
4. The highcharts-vue demo shows setting navigator.liveRedraw to true. I can't find this option in the api doc, but I have it set.

Thanks for your assistance.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Vue/Gantt/Navigator - navigator losing settings when changing chartOptions.title.text

Hi,
That's great to hear!

Thanks for the details it could help other users in the future, I appreciate.

In case of any further questions, feel free to contact us again.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”