CODEWITHSUNDEEP
javascripthighcharts
Marek Kamiński
Marek Kamiński

Reputation: 442

Tooltip for series with different time intervals

I have following problem. I provide data to highchart. It just happens that every series of data I provides has time interval of 15 minutes, except one that has time interval of 1 minute. Tooltips (on hovering mouse on chart) appear in such way: every one minute there is tooltip for that one series that has 1 minute interval, and every 15 minutes there is a tooltip for all series.

I want them to appear just every 15 minutes.

here is my highchart config:

{
      chart: {
        height: 500,
        spacingRight: 70
      },
      title: {
        text: ''
      },
      legend: {
        enabled: true
      },
      xAxis: {
        type: 'datetime',
        
      },
      rangeSelector: {
        selected: 5,
        inputEnabled: false,
        buttonTheme: {
          visibility: 'hidden'
        },
        labelStyle: {
          visibility: 'hidden'
        }
      },
      navigator: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      scrollbar: {
        enabled: false
      },
      yAxis: [
        {
          title: {
            text: ''
          },
          labels: {
            x: 50,
            format: '{value} kW'
          },
          showLastLabel: true
        },
        {
          title: {
            text: ''
          },
          labels: {
            format: '{value} ˚C'
          },
          opposite: false,
          showLastLabel: true
        }
      ],
      tooltip: {
        shared: true,
        split: false
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataGrouping: {
            enabled: false
          },
          dataLabels: {
            enabled: false
          }
        },
        area: {
          stacking: 'normal',
          dataGrouping: {
            enabled: false
          },
          dataLabels: {
            enabled: false
          }
        }
      },
      series: this.prepareChartSeries()
    }

Here is what I have: pic1

Here is what I want: pic2

Upvotes: 0

Views: 185

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

Use a formatter function for tooltip and return false if there is less than two points. Example:

    tooltip: {
        shared: true,
        formatter: function(tooltip) {
            if (this.points.length < 2) {
                return false;
            }

            return tooltip.defaultFormatter.call(this, tooltip);
        }
    }

Live demo: http://jsfiddle.net/BlackLabel/zrse9cdj/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

Upvotes: 1

Related Questions