Высокие диаграммы, кажется, имеют неполное определение типа

Question

Похоже, определение типа Hightcharts (Highcharts.d.ts) является неполным.

Я хотел бы использовать код, найденный в этом jsfiddle: https://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/axisbreak/break-visualized/

I'mработая с React (16.10) и Typescript (3.6.3)

Я также использую последнюю версию Highcharts (7.2.0)

И на самом деле некоторые свойства не распознаются определением типа, напримеркак:

• breakArray на Highcharts.Point.
• shapeArgs на Highcharts.Point
• графика на Highcharts.Point

Вотрезультат, который еще не работает:

import React from 'react';
import Highcharts from "highcharts";
import brokenAxis from "highcharts/modules/broken-axis";
import HighchartsReact from "highcharts-react-official";

import './App.css';

brokenAxis(Highcharts)

const data = [
  { name: "Marker1", y: 1 },
  { name: "Marker2", y: 25 },
  { name: "Marker3", y: 100 },
  { name: "Marker4", y: 0 },
];

const options: Highcharts.Options = {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Variabilité des temps de coupe'
  },
  xAxis: {
    type: "category"
  },
  yAxis: {
    lineColor: 'black',
    lineWidth: 2,
    max: 100,
    breaks: [{
      from: 30,
      to: 90
    }],
    events: {
      pointBreak: pointBreakColumn
    }
  },
  series: [{
    type: "bar",
    name: 'Variabilité',
    data: data
  }]
}

Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (this: Highcharts.Axis, proceed, lineWidth) {
  var axis = this,
    path = proceed.call(this, lineWidth),
    x = path[1],
    y = path[2];

  Highcharts.each(axis.breakArray || [], function (brk) {
    if (axis.horiz) {
      x = axis.toPixels(brk.from);
      path.splice(3, 0,
        'L', x - 4, y, // stop
        'M', x - 9, y + 5, 'L', x + 1, y - 5, // left slanted line
        'M', x - 1, y + 5, 'L', x + 9, y - 5, // higher slanted line
        'M', x + 4, y
      );
    } else {
      y = axis.toPixels(brk.from);
      path.splice(3, 0,
        'L', x, y - 4, // stop
        'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
        'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
        'M', x, y + 4
      );
    }
  });
  return path;
});

const pointBreakColumn: Highcharts.AxisPointBreakEventCallbackFunction = (e) => {
  var point = e.point,
    brk = e.brk,
    shapeArgs = point.shapeArgs,
    x = shapeArgs.x,
    y = this.translate(brk.from, 0, 1, 0, 1),
    w = shapeArgs.width,
    key = ['brk', brk.from, brk.to],
    path = ['M', x, y, 'L', x + w * 0.25, y + 4, 'L', x + w * 0.75, y - 4, 'L', x + w, y];

  if (!point[key]) {
    point[key] = this.chart.renderer.path(path)
      .attr({
        'stroke-width': 2,
        stroke: point.series.options.borderColor
      })
      .add(point.graphic.parentGroup);
  } else {
    point[key].attr({
      d: path
    });
  }
}

const App: React.FC = () => {
  return (
    <div className="App">
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
}

export default App;