CODEWITHSUNDEEP
highchartstooltiparea
HorseFly
HorseFly

Reputation: 57

Highcharts - How to show intermediate values on Area chart

I have the following chart: https://jsfiddle.net/w7jm2n6u/

  Highcharts.chart('container', {
      chart: {
        type: 'area',
        zoomType: 'x'
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      legend: {
        enabled: false
      },
      xAxis: {
        type: 'datetime',
        title: {
          enabled: false
        },
        min: Date.UTC(2018, 10, 1)
      },
      yAxis: {
        title: {
          enabled: false
        },
        labels: {
          formatter: function() {
            return this.value / 1000;
          }
        },
        max: 2000
      },
      tooltip: {
        split: false,
      },
      plotOptions: {
        area: {
          lineWidth: 1,
          marker: {
              enabled: false,
              states: {
                hover: {
                  enabled: false
                }
              }
            },
        },
          series: {
          trackByArea: true,
          stickyTracking: false,
        }
      },
      series: [{
          name: 'Exceeds',
          color: '#0000FF',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 2000
          },{
            x: Date.UTC(2019, 0, 1),
            y: 2000
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 2000
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 2000
          }],
        }, {
          name: 'Meets',
          color: '#00FF00',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 700
          },{
            x: Date.UTC(2019, 0, 1),
            y: 800
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 700
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 800
          }],
        }, {
          name: 'Minimum',
          color: '#FFFF00',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 400
          },{
            x: Date.UTC(2019, 0, 1),
            y: 400
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 400
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 400
          }],
        }, {
          name: 'Below Minimum',
          color: '#FF0000',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 100
          },{
            x: Date.UTC(2019, 0, 1),
            y: 200
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 300
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 320
          }],
        },
        {
          name: 'Data',
          color: '#000000',
          type: 'line',
          data: [{
              x: Date.UTC(2019, 0, 3),
              y: 50
            },
            {
              x: Date.UTC(2019, 0, 15),
              y: 500
            },
            {
              x: Date.UTC(2019, 1, 4),
              y: 1000
            },
            {
              x: Date.UTC(2019, 1, 15),
              y: 1400
            },
            {
              x: Date.UTC(2019, 1, 28),
              y: 1900
            },
          ]
        },
      ]
    });

Ideally, I would like to be able to hover over each area and see a tooltip with the value at that point in time for each of the 4 areas. For instance, between January 1st and February 1st, the Below Minimum (red) value ranges from 200 to 300. If I were to put my mouse halfway between those dates, I would want to see 'Below Minimum: 250'. Is there a way to achieve this?

If not, I would at least like the current tooltip to always show the previous point value instead of whichever it is closest to. If I hover around 12/2018, I want to see the point from Sept 1, 2018, not January 1, 2019. Essentially these are start dates for the values and are only valid on or after the date.

Upvotes: 0

Views: 63

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You need to increase the density of points. Below you can find an example how you can do it programmatically:

chart: {
    type: 'area',
    events: {
        load: function() {
            var series = this.series,
                iterations = 2,
                i = 0,
                newData = [];

            for (; i < iterations; i++) {
                series.forEach(function(s) {
                    newData = [];

                    s.points.forEach(function(p, j) {
                        if (j) {
                            newData.push(
                                [
                                    s.points[j - 1].x +
                                    (p.x - s.points[j - 1].x) / 2,
                                    s.points[j - 1].y +
                                    (p.y - s.points[j - 1].y) / 2
                                ], 
                                [p.x, p.y]
                            );
                        } else {
                            newData.push([p.x, p.y]);
                        }
                    });

                    s.setData(newData, false);
                });
                this.redraw(false);
            }
        }
    }
},

Live demo: https://jsfiddle.net/BlackLabel/d8jq9bvh/

API Reference: https://api.highcharts.com/highcharts/chart.events.load

Upvotes: 1

Related Questions