CODEWITHSUNDEEP
javascripthighcharts
Warsa
Warsa

Reputation: 1

How to show more than one "dataMax" in Highcharts?

Currently, I'm showing a max point in the line chart. But I want to change dataMax to top 5 max value points in chart.How can I achieve this in Highcharts?

var defaultData = 'urlto.csv';
var urlInput = document.getElementById('fetchURL');
var pollingCheckbox = document.getElementById('enablePolling');
var pollingInput = document.getElementById('pollingTime');

function createChart() {
  Highcharts.chart('closed5', {
    chart: {
      type: 'area',
      zoomType: 'x'
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          style: {},
          formatter: function() {
            if (this.y === this.series.dataMax) {
              return this.y;
            }
          }
        }
      }
    },
    title: {
      text: 'Chart for charting'
    },
    data: {
      csvURL: urlInput.value,
      enablePolling: pollingCheckbox.checked === true,
      dataRefreshRate: parseInt(pollingInput.value, 10)
    }
  });

  if (pollingInput.value < 1 || !pollingInput.value) {
    pollingInput.value = 1;
  }
}

urlInput.value = defaultData;

// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;

// Create the chart
createChart();

Upvotes: 0

Views: 278

Answers (2)

Teocci
Teocci

Reputation: 8845

As far as I know formatter callback is the way to format the data labels. If you want to show the top N points you should sort the data in a new array and pull the top 5 values. This is an example of how to clone and sort the array and extract the top 5 elements in the formatter call. 

let data = [32, 10, 20, 99, 30, 54, 85, 56, 11, 26, 15, 45, 55, 65];
//Copy the array
let temp = data.slice();
// Sort the temp array in descending order
temp.sort((a, b) => b - a);

Highcharts.chart('closed5', {
  chart: {
    type: 'area',
    zoomType: 'x'
  },
  title: {
    text: 'Chart for charting'
  },
  series: [{
    data: data,
    dataLabels: {
      enabled: true,
      formatter: function() {
        if (temp.indexOf(this.y) < 5) {
          return this.y;
        }
      },
    },
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="closed5"></div>

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39069

As @ewolden rightly noticed, you can sort your data and show only the five highest values:

var data = [11, 22, 33, 44, 55, 66, 15, 25, 35, 45, 55, 65],
    sortedData = data.slice().sort(function(a, b){
        return b - a
    });

Highcharts.chart('container', {
    series: [{
        data: data,
        dataLabels: {
            enabled: true,
            formatter: function() {
                if (sortedData.indexOf(this.y) < 5) {
                    return this.y;
                }
            }
        }
    }]
});

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

API: https://api.highcharts.com/highmaps/series.mapbubble.dataLabels.formatter

Upvotes: 1

Related Questions