CODEWITHSUNDEEP
javascripthighcharts
dfahsjdahfsudaf
dfahsjdahfsudaf

Reputation: 491

Only connect points within the same category (Highcharts)

I have four categories of data: Apples, Bananas, Oranges, Pears. Each category has multiple data points. I only want a line to connect all the data points within a category. I do not want a line to connect the categories. Sorry for the bad drawing, but I want to keep the lines in the circles (connect all the data points within a category) and not show the lines that have an X (lines connecting the categories).

Image

function setTooltip(point) {
  let result = "";
  result += "<b>" + point.z + ": </b>" + "</br>" + point.y + "<br/>";
  return result;
}

Highcharts.setOptions({
  chart: {
    height: 500,
    type: "scatter",
    zoomType: "xy"
  },
  plotOptions: {
    scatter: {
      lineWidth: 1,
      color: "#a7a7a7",
      tooltip: {
        headerFormat: '<span style="font-size:14px">{point.key}</span><br/>'
      }
    },
    series: {
      marker: {
        fillColor: "black",
        radius: 3,
        states: {
          hover: {
            fillColor: "red"
          }
        }
      }
    }
  },
  tooltip: {
    pointFormatter: function () {
      let point = this;
      return setTooltip(point);
    }
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  xAxis: {
    type: "category"
  },
});

new Highcharts.Chart("graph1", {
  title: {
    text: "Fruit"
  },
  series: [
    {
      keys: ["name", "y", "z"],
      data: [
        ["Apples", 501.82, "pos1"],
        ["Apples", 502.61, "pos2"],
        ["Apples", 502.61, "pos3"],
        ["Apples", 502.16, "pos4"],
        ["Bananas", 495.73, "pos1"],
        ["Bananas", 493.27, "pos2"],
        ["Bananas", 493.38, "pos3"],
        ["Bananas", 494.34, "pos4"],
        ["Oranges", 497.35, "pos1"],
        ["Oranges", 497.31, "pos2"],
        ["Oranges", 498.03, "pos3"],
        ["Oranges", 496.67, "pos4"],
        ["Pears", 497.62, "pos1"],
        ["Pears", 498.46, "pos2"],
        ["Pears", 497.54, "pos3"],
        ["Pears", 497.95, "pos4"]
      ]
    }
  ]
});

https://codepen.io/austeng/pen/KKdVRqr

It is important that I keep the format of the data the same (only use one series) and use keys. Any ideas on how to do this? Also, would it be possible to find the average of the points within a category? Thanks.

Upvotes: 0

Views: 182

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I think that the best solution to achieve it without changing the series object structure is by calculating positions for the using the zones feature after the initial render via using the load callback.

Demo: https://jsfiddle.net/BlackLabel/efwytjdn/

events: {
  load() {
    let chart = this,
      begin = 0.01,
      end = 0.99,
      zones = [];

    for (let i in chart.xAxis[0].paddedTicks) {
      if (parseFloat(i) !== chart.xAxis[0].paddedTicks.length - 1) {
        zones.push({
          value: parseFloat(i) + begin
        })
        zones.push({
          value: parseFloat(i) + end,
          color: 'transparent'
        })
      }
    }

    chart.series[0].update({
      animation: false,
      zoneAxis: 'x',
      zones: zones
    })
  }
}

API: https://api.highcharts.com/highcharts/series.line.zoneAxis

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

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Upvotes: 1

Related Questions