How do I define custom gauges?

[appjitsu]

I tried this:

import HighchartsReactNative, {
  Highcharts,
} from '@highcharts/highcharts-react-native';
...
Highcharts.seriesTypes.gauge.prototype.translate = function () {
   ...
}

[appjitsu]

What I'm trying to accomplish is something like this: http://jsfiddle.net/daniel_s/9faw4kwd/

[appjitsu]

My current gauge code:

<HighchartsReactNative
        styles={[
          styles.gauge,
          { width: dimensions.width, height: dimensions.height },
        ]}
        scalesPageToFit={undefined}
        options={{
          chart: {
            margin: 0,
            padding: 0,
            backgroundColor: 'transparent',
          },
          legend: {
            enabled: false,
          },
          title: {
            text: '',
          },
          pane: {
            startAngle: -130,
            endAngle: 130,
            background: {
              borderWidth: 0,
              backgroundColor: 'none',
              innerRadius: '100%',
              outerRadius: '100%',
              shape: 'arc',
            },
          },
          yAxis: {
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            tickWidth: 0,
            min: 0,
            max: 100,
            labels: {
              enabled: false,
            },
            plotBands: [
              {
                from: 0,
                to: 25,
                color: '#79B069',
                innerRadius: '100%',
                outerRadius: '0%',
              },
              {
                from: 26,
                to: 50,
                color: '#E8E069',
                innerRadius: '100%',
                outerRadius: '0%',
              },
              {
                from: 51,
                to: 75,
                color: '#B5461A',
                innerRadius: '100%',
                outerRadius: '0%',
              },
              {
                from: 76,
                to: 100,
                color: '#7F5FA9',
                innerRadius: '100%',
                outerRadius: '0%',
              },
            ],
          },
          plotOptions: {
            series: {
              allowPointSelect: false,
              dataLabels: {
                enabled: false,
              },
            },
            gauge: {
              dataLabels: {
                enabled: false,
              },
              dial: {
                radius: 95,
                backgroundColor: '#FFF',
                borderWidth: size === 'small' ? 2 : 2,
                borderColor: '#000',
                baseWidth: size === 'small' ? 8 : 15,
                baseLength: size === 'small' ? 75 : 85,
              },
            },
          },
          tooltip: {
            enabled: false,
          },
          series: [
            {
              type: 'gauge',
              data: [level],
            },
          ],
        }}
      />

Instead of the arrow needle, I want a circle that signifies the current level.

[Denyllon]

Hi @appjitsu ,

Thank you for contacting us. Unfortunately applying customizations is possible using this wrapper package, because they need direct Highcharts object reference which is unavailable through the react native app.

I want to also inform you that we no longer maintain this package since 1st of January 2021, and this package has been marked as deprecated.

Kind regards!

[appjitsu]

Hi @appjitsu ,

Thank you for contacting us. Unfortunately applying customizations is possible using this wrapper package, because they need direct Highcharts object reference which is unavailable through the react native app.

I want to also inform you that we no longer maintain this package since 1st of January 2021, and this package has been marked as deprecated.

Kind regards!

What should I use instead?