Target/ goal line implementation

[1Jesper1]

Hello, nice project! I would like to ask if it's possible to implement a target line/ goal line in the gauge chart.
Something like this: https://plnkr.co/edit/25KSME35LewdkQaybBc5?p=preview

[1Jesper1]

Just a start:

export function drawTargetLine(
  svg,
  chartHeight: number,
  offset: number,
  needleColor: string,
  centralLabel: string,
  outerRadius: number,
  targetLine: number,
  outerNeedle: boolean,
) {
  // Different circle radiuses in the base of needle
  let innerGaugeRadius =
    centralLabel || outerNeedle ? chartHeight : chartHeight * 0.1
    let gaugeArc = arc()
    .innerRadius(innerGaugeRadius)
    .outerRadius(outerRadius)
    .startAngle(perc2RadWithShift(targetLine))
    .endAngle(perc2RadWithShift(targetLine + 1))

  // White needle base if something should be written on it, gray otherwise
  svg
    .append('path')
    .attr('d', gaugeArc)
    .attr('fill', centralLabel || outerNeedle ? needleColor : needleColor)
    .attr(
      'transform',
      'translate(' +
        (chartHeight + offset * 2) +
        ', ' +
        (chartHeight + offset) +
        ')',
    )
    .attr('class', 'bar')
}

[greetclock]

@1Jesper1 thank you, it's a nice idea. We will discuss it and then implement. I'll ping you when it's done.

[1Jesper1]

Sounds great! @cherurg Adding a target line value label would also be handy.

[nbonamy]

Hello there! Just submitted a PR that should do the work (arcLabels and arcPadding). Cheers!
#6

[mmaltsev]

The functionality is now available at the newly published release 0.5.0.

Thanks to @nbonamy!