CODEWITHSUNDEEP
angulartypescripthighcharts
Emile Cantero
Emile Cantero

Reputation: 2053

Disable tooltip only for months and days in Highcharts

Hi highcharts community !

In my angular 4 project, I am trying to disable just the days and the months in the tooltip of my horizontal bar chart, to just make appear the hour minutes and secondes, if anyone know how to make it?

I tried with the property dateTimeLabelFormats without success

Thanks in advance

horizontalbar.ts:

constructor(public userService3: UserService3) {

  const timeZoneOffset = new Date().getTimezoneOffset();

  const Highcharts = require('highcharts');

    Highcharts.setOptions({
  global: {
   timezoneOffset: timeZoneOffset
  },
      });


       this.options = {
        title : { text : '' },
        chart: {  type: 'area',
                    label: {
                      format: '{data: %B}'
                    }},
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { type: 'datetime',
                //  day: '%H',
                startOnTick: false,
                endOnTick: false,
                minTickInterval: 24 * 3600 * 1000,
                tickInterval: 36e5 * 2, // two hours
                },
        yAxis: { min: 0,
          max: 100,
           labels: {
              enabled: true
          },
             title: {
             text: null
           },
        },
        plotOptions: {
          series: {
              color: '#648e59',
              fillOpacity: 0.8,
              fillColor: '#648e59',
              pointInterval: 36e5 * 2 // two hours
                  }
        },
        series: [{
          name: 'Taux de fonctionnement',
          data: [],
        }]
       };
   }
  saveInstance(chartInstance) {
    this.chart = chartInstance;
    console.log(chartInstance);
}

  public ngOnInit () {
  this.dataSubscription = this.userService3.getData().subscribe((data) 
 => {
  this.options.series[0].data = data.data.operating_details;
  console.log(data);
   });
}
   ngOnDestroy() {
  if (this.dataSubscription){
 this.dataSubscription.unsubscribe();
 }
   }
     public hideDem2(): void {
   this.hideMeup = !this.hideMeup;
    this.hideMeup = !this.hideMeup;

    this.hideItup = !this.hideItup;
        if (this.hideItup) {
          this.opened.emit(true);
        } else {
          this.closed.emit(false);
        }
           console.log(this.hideItup);
      }

   }

horizontalbar.html:

      <chart [options]="options" (load)="saveInstance($event.context)">
      <!--    <point (select)="onPointSelect($event)"></point> -->
      </chart>

Upvotes: 1

Views: 239

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

If by "tick in my horizontal bar chart," you mean the axis labels, you could add the following to your xAxis options:

labels: {
    formatter: function () {
        return Highcharts.dateFormat('%H:%M:%S', this.value);
    },
},

That should return only the hours, minutes, and seconds of your axis labels in the format H:M:S.

More information about Highcharts.dateFormat() can be found here: http://api.highcharts.com/highcharts/Highcharts.numberFormat.

The Highcharts.dateFormat() function uses PHP's strftime formatting rules (see http://php.net/manual/en/function.strftime.php).

I hope this information is helpful to you.

Update: Per Emile's comments, the tick in question was the chart's tooltip. In this case, what you would need to modify is as follows:

tooltip: {
    formatter: function () {
        return Highcharts.dateFormat('%H:%M:%S', this.x);
    },
},

See the following resources from the Highcharts documentation:

Upvotes: 1

Related Questions