CODEWITHSUNDEEP
javascripthighcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

Highcharts - Linear series zoom on logarithmic axis

I'm having trouble when zooming in on a linear series that is on a logarithmic yAxis. What would be an easy solution?

Zoom out:
enter image description here

Zoom in:
enter image description here

Linear series is not rescaling correcly, those series should remain on same position relative to main series, is there any missing configs to those series that would adjust them to logarithmic axis?

Demo: https://jsfiddle.net/bernardo0marques/dfqouLm5/30/

Code snippet:

Highcharts.stockChart("container", {
  chart: {
    type: "line",
    zoomType: "xy",
  },
  series: [
    {
      data: [
        {
          x: -220924800000,
          high: 63,
          low: 56,
          close: 62,
          open: 56,
          name: "01/01/1963",
          color: "#F57350",
        },
        {
          x: 1657670400000,
          high: 18893.92,
          low: 18159.03,
          close: 18159.03,
          open: 18593.15,
          name: "13/07/2022",
          color: "#297F0D",
        },
      ],
      dataGrouping: {
        forced: true,
        groupPixelWidth: 0,
        units: [["day", 1]],
      },
      id: "main-series",
      name: "Demo series",
      type: "candlestick",
      yAxis: "default",
    },
    {
      color: "#C0C0C0",
      data: [
        [-220914000000, 369],
        [1659236400000, 198817.91340815497],
      ],
      dashStyle: "LongDash",
      id: "upper-tendency",
      tooltip: {
        valueDecimals: 0,
        xDateFormat: "%B %Y",
      },
      showInLegend: false,
      yAxis: "default",
    },
    {
      color: "#C0C0C0",
      data: [
        [-220914000000, 34],
        [1659236400000, 16672.03531810569],
      ],
      dashStyle: "Solid",
      id: "lower-tendency",
      tooltip: {
        valueDecimals: 0,
        xDateFormat: "%B %Y",
      },
      showInLegend: false,
      yAxis: "default",
    },
  ],
  title: { text: "Logarithmic Zoom: Linear series" },
  tooltip: { shared: true, split: false },
  xAxis: {
    dateTimeLabelFormats: {
      second: "%d/%m/%y<br/>%H:%M:%S",
      minute: "%d/%m/%y<br/>%H:%M",
      hour: "%d/%m/%y<br/>%H:%M",
      day: "%d/%m/%y",
      month: "%m/%y",
      year: "%Y",
    },
    type: "datetime",
  },
  yAxis: [
    {
      id: "default",
      opposite: true,
      type: "logarithmic",
      title: { text: "" },
      reversed: false,
      offset: 50,
      tickInterval: 0.4,
    },
  ],
});

Upvotes: 0

Views: 152

Answers (1)

magdalena
magdalena

Reputation: 3695

It is a bug which you can track in the following ticket: https://github.com/highcharts/highcharts/issues/16784

As a temporary workaround, you can set xAxis.ordinal to false in your config.

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

Upvotes: 1

Related Questions