Arrow Chart JS Labels Issue

by methnen

HTML

<script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="m-chart-container-1175-1" class="m-chart-container">
	<div id="m-chart-1175-1" class="m-chart">
		<?xml version="1.0" encoding="utf-8"?>
		<svg viewBox="0 0 1229.36 1108" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		</svg>
	</div>
</div>

CSS

.frame {
    fill: none;
    stroke: #000;
  }
  .axis text {
    font: 10px sans-serif;
  }
  .axis line,
  .axis circle {
    fill: none;
    stroke: steelblue;
    stroke-dasharray: 4;
  }
  .axis:last-of-type circle {
    stroke: steelblue;
    stroke-dasharray: none;
  }
  .line {
    fill: none;
    stroke: orange;
    stroke-width: 3px;
  }

JavaScript

data = {
    chart_args: {
        "max": 93.69369369369369,
        "min": 65.46546546546547,
        "data": [
            ["Jamie", 94, 0, "1", "10", "top"],
            ["Geoffrey", 82, 45, "3", "5", "top"],
            ["Sally", 80, 207, "2", "3", "bottom"],
            ["Joseph", 78, 54, "2", "45", "top"],
            ["Xinmin", 76, 63, "1", "-3", "top"],
            ["Nianqing", 79, -27, "2", "2", "top"],
            ["George", 66, 234, "2", "4", "bottom"],
            ["Samuel", 83, 126, "3", "7", "bottom"],
            ["Rachel", 79, 162, "3", "5", "bottom"],
            ["Jennifer", 89, 153, "2", "-4", "bottom"],
            ["Patricia", 76, 45, "2", "4", "top"]
        ]
    },
    post_id: 1175,
    instance: 1
};

var m_chart_d3_radar = {};

(function( $ ) {
	'use strict';

	// Start things up
	m_chart_d3_radar.init = function( chart_args, post_id, instance ) {
		this.post_id    = post_id;
		this.instance   = instance;
		this.chart_args = chart_args;

		// The actual dimensions of the SVG
		this.width  = 1229;
		this.height = 1108;

		// If the SVG doesn't have a centered chart we need to center d3's chart area in relation to it
		this.vertical   = 0;
		this.horizontal = -13;

		// The radius needs to fit the radius of the chart in the SVG so we adjust that here
		this.radius_modifier = -90;

		// The SVG design doesn't account for items in the actual center or right on the edge so we handle that here
		this.center = 85;
		this.outer  = 15;

		// Size of the chart points
		this.point_size = 13;

		// The colors used for the three point/arrow types
		this.point_colors = [
			'red',
			'blue',
			'green'
		];

		// The lengths for the three arrow types
		this.arrow_lengths = [
			'21',
			'38',
			'53'
		];

		this.render_chart();
	};

	m_chart_d3_radar.render_chart = function( cx, cy, ex, ey ) {
		// Calculate the radius of the chart area
		let radius = ( Math.min(this.width, this.height) / 2 ) + this.radius_modifier;

		// Sale the weighted score...