DEV Community: Daniel Chahla

Matdown: not your average parser

Daniel Chahla — Thu, 01 May 2025 15:32:17 +0000

What is Matdown?

Matdown is a compact, dependency-free equation parser that turns lightweight math expressions into styled, semantic HTML - no LaTeX, no external libraries, no regrets.
It's inspired by the realization that game engines, like cloud services, are just real-time systems - and HTML/CSS are expressive primitives that deserve more credit.
- -

Why ?

✅ No parser generators
✅ No ASTs
✅ No LaTeX
✅ No DOM hell
✅ No stylesheets from the Math Wizard Society™ ruining your vibe Instead:
✨ Uses recursive string parsing
✨ Renders DOM directly (fractions, exponents, etc.)
✨ Leverages the box model & inline layout
✨ Comes with a modular, non-intrusive context menu UI - -

Example Input

(1+x)² / (2x - 3)

⬇️ Becomes

<div class="fraction">
 <span class="numerator">(1+x)<sup>2</sup></span>
 <span class="denominator">(2x - 3)</span>
</div>

- -

🛠 How It Works

1. Recursive Descent Parsing

Function: buildNode(exp)
Splits expression by outermost operator
Recursively wraps sub-parts into semantic HTML containers

2. Parentheses Matching

Function: matchingParens(str)
Uses a counter-based matcher to balance () pairs safely

3. Operator Precedence

Left-to-right scan
Evaluates only outermost operators unless overridden by parentheses
Fast and linear for common math expressions

4. Symbol Search Filtering

Smart input filtering using .filter() on a static symbol list
Zero-cost search experience for inline math menus - -

Why Not KaTeX or LaTeX?

They're bloated, margin-fighting, box-model-reinventing beasts.
You don't need a compiler to render a fraction.

You need a <div>. Matdown leans into browser-native layouts - because HTML is the universal rendering target anyway.

- -

📦 Install / Use

Matdown is zero-dependency and browser-ready.

- -

Philosophy

hakuna matata what a wonderful phrase - just making sure you are still there.
- -

🧩 Roadmap

[ ] Inline editing
[ ] Touch-friendly symbol picker
[ ] Expand support for integrals/summations
[ ] Export to SVG or Canvas - -

Built By

Daniel Chahla
Matdown was born from frustration - and built for clarity.
- -

Github -> https://github.com/dchahla/Project-Matdown

See the Pen
Matdown: Interactive Math Algorithm Composer by Daniel Chahla (@urdoingitwrong)
on CodePen.

📜 License

MIT License - Bop it, fork it, remix it. Just don't LaTeX it.

Bitbanging a Procedural Sphere: Precision to Perfection

Daniel Chahla — Thu, 01 May 2025 15:08:33 +0000

Precision, Performance, and Perfection

Procedurally drawing a sphere in WebGL is fascinating because, despite the underlying geometry remaining mathematically consistent, implementations diverge widely based on load constraints and polygon counts. This contrast is a paradox in itself—after all, a perfect sphere has no edges.

Procedurally generating high-quality 3D geometry for the web demands navigating a fine balance between visual elegance, computational efficiency, and seamless user experience. While traditional methods often depend on heavy libraries or complex pre-processing steps, the innovative "bitbanging" approach presented here revolutionizes this paradigm with its elegant simplicity, exceptional smoothness, and visually superior outcomes.

Why "Bitbanging"?

"Bitbanging" typically refers to precisely manipulating hardware signals using literal bit-by-bit instructions for fine-grained, optimized control. Similarly, our procedural sphere generation meticulously handcrafts vertex positions and indices, providing direct, granular control over geometry creation—earning its metaphorical namesake as a masterfully optimized WebGL technique.

For us, it means designing our functions around the 4 x 4 matrices

function mat4Perspective(out, fovy, aspect, near, far) {
    const f = 1 / Math.tan(fovy / 2);
    out[0]  = f/aspect; out[1]  = 0; out[2]  = 0;                           out[3]  = 0;
    out[4]  = 0;        out[5]  = f; out[6]  = 0;                           out[7]  = 0;
    out[8]  = 0;        out[9]  = 0; out[10] = (far+near)/(near-far);       out[11] = -1;
    out[12] = 0;        out[13] = 0; out[14] = (2*far*near)/(near-far);     out[15] = 0;
  }
  function mat4Identity(m) {
    m[0]  = 1; m[1]  = 0; m[2]  = 0;  m[3]  = 0;
    m[4]  = 0; m[5]  = 1; m[6]  = 0;  m[7]  = 0;
    m[8]  = 0; m[9]  = 0; m[10] = 1;  m[11] = 0;
    m[12] = 0; m[13] = 0; m[14] = 0;  m[15] = 1;
  }
  function mat4Translate(out, x, y, z) {
    out[12] += out[0]*x + out[4]*y + out[8]*z;
    out[13] += out[1]*x + out[5]*y + out[9]*z;
    out[14] += out[2]*x + out[6]*y + out[10]*z;
    out[15] += out[3]*x + out[7]*y + out[11]*z;
  }

The Sphere Revolution

Contrary to conventional procedural spheres that rely on bulky mathematical computations and extensive dependencies, our approach streamlines the process through direct manipulation of vertices and indices. By harnessing optimized looping techniques, carefully executed trigonometric computations, and straightforward typed arrays, this method achieves remarkable efficiency and visual fidelity.

Highlights of our approach include:

Ultra-light Footprint: Pure JavaScript and WebGL with minimal dependencies, resulting in extraordinarily lightweight implementations.
Visually Stunning Smoothness: Precisely calculated vertex placements based on carefully incremented latitude and longitude angles eliminate polygonal artifacts and seams, delivering seamless, aesthetically pleasing spheres even at minimal vertex counts.
Direct Control of Geometry: Separate horizontal and vertical index buffers facilitate crisp line rendering, allowing detailed customization of sphere wireframes and ensuring impeccable visual clarity.

Efficiency Redefined

This method generates spheres by directly computing vertex positions through optimized trigonometric functions, seamlessly integrating these positions into WebGL buffers. This eliminates the overhead associated with traditional geometry libraries, significantly reducing memory usage and CPU demands.

Unparalleled Precision

Typical procedural spheres suffer from visible seams, uneven vertex distributions, and jagged artifacts. In contrast, our carefully optimized latitude and longitude increments produce remarkably uniform and visually pleasing vertex spacing, ensuring consistently smooth appearances from every angle.

Clean, Powerful Code

At the core of this implementation lies concise, elegant code. Minimalist vertex and fragment shaders offer straightforward pathways for customization or expansion. Geometry generation remains lean, clear, and maintainable—qualities rarely found in procedural geometry implementations.

Practical Impact

Beyond theoretical elegance, this optimized method holds tangible real-world value, particularly for resource-constrained environments such as real-time visualizations, mobile 3D apps, and VR experiences. Its superior efficiency translates into smoother frame rates, rapid load times, and dramatically enhanced user experiences.

A New Standard in Procedural Generation

With its meticulous precision, unmatched smoothness, and exceptional efficiency, the "bitbanging" procedural sphere method presented here doesn't merely improve upon existing approaches—it sets an entirely new benchmark for WebGL geometry implementations.

This isn't just another procedural sphere; it's arguably the definitive procedural sphere implementation available on the web today.

Read the full write up at https://chahla.net/posts?pid=1743700263180


  const latBands  = 20;
  const lonBands  = 20;
  const radius    = 1.0;


(function() {


  // -- Get a WebGL 1 context --
  const canvas = document.getElementById("glcanvas");
  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    alert("Unable to initialize WebGL.");
    return;
  }

  // -- Vertex shader (positions only) --
  const vsSource = `
    attribute vec4 aPosition;
    uniform mat4 uProjectionMatrix;
    uniform mat4 uModelViewMatrix;

    void main(void) {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;
    }
  `;

  // -- Fragment shader (simple solid color) --
  const fsSource = `
    precision mediump float;
    uniform vec4 uColor;
    void main(void) {
      gl_FragColor = uColor;
    }
  `;

  // -- Compile & link shaders --
  function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      console.error("Error compiling shader:", gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
      return null;
    }
    return shader;
  }

  const vertexShader   = createShader(gl, gl.VERTEX_SHADER,   vsSource);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.error("Shader program failed to link:", gl.getProgramInfoLog(shaderProgram));
    return;
  }

  // -- Get locations --
  const aPositionLoc      = gl.getAttribLocation(shaderProgram, 'aPosition');
  const uProjectionMatrix = gl.getUniformLocation(shaderProgram, 'uProjectionMatrix');
  const uModelViewMatrix  = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
  const uColorLoc         = gl.getUniformLocation(shaderProgram, 'uColor');

  // -- Create sphere geometry (split indices into horizontal vs vertical) --
  function createWireSphereData(latBands, lonBands, radius) {
    const positions = [];
    const horizontalIndices = [];
    const verticalIndices   = [];

    // Generate positions (vertex array)
    for (let lat = 0; lat <= latBands; lat++) {
      const theta = (lat * Math.PI) / latBands; 
      const sinTheta = Math.sin(theta);
      const cosTheta = Math.cos(theta);

      for (let lon = 0; lon <= lonBands; lon++) {
        const phi = (lon * 2.0 * Math.PI) / lonBands;
        const sinPhi = Math.sin(phi);
        const cosPhi = Math.cos(phi);

        const x = radius * cosPhi * sinTheta;
        const y = radius * cosTheta;
        const z = radius * sinPhi * sinTheta;
        positions.push(x, y, z);
      }
    }

    // The number of vertices in each "row" (one latitude)
    const vertsPerRow = lonBands + 1;

    // Build horizontal line indices (connect each row)
    for (let lat = 0; lat <= latBands; lat++) {
      const rowStart = lat * vertsPerRow;
      for (let lon = 0; lon < lonBands; lon++) {
        horizontalIndices.push(rowStart + lon, rowStart + lon + 1);
      }
    }

    // Build vertical line indices (connect columns across latitudes)
    for (let lon = 0; lon <= lonBands; lon++) {
      for (let lat = 0; lat < latBands; lat++) {
        const first  = lat * vertsPerRow + lon;
        const second = first + vertsPerRow;
        verticalIndices.push(first, second);
      }
    }

    return {
      positions: new Float32Array(positions),
      horizontal: new Uint16Array(horizontalIndices),
      vertical:   new Uint16Array(verticalIndices),
    };
  }


  const sphereData = createWireSphereData(latBands, lonBands, radius);

  // -- Create a single position buffer --
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, sphereData.positions, gl.STATIC_DRAW);

  // -- Create two index buffers: one for horizontal lines, one for vertical --
  const horizontalIndexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, horizontalIndexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sphereData.horizontal, gl.STATIC_DRAW);

  const verticalIndexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, verticalIndexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sphereData.vertical, gl.STATIC_DRAW);

  // -- Simple matrix utilities --
  function mat4Perspective(out, fovy, aspect, near, far) {
    const f = 1 / Math.tan(fovy / 2);
    out[0]  = f/aspect; out[1]  = 0; out[2]  = 0;                           out[3]  = 0;
    out[4]  = 0;        out[5]  = f; out[6]  = 0;                           out[7]  = 0;
    out[8]  = 0;        out[9]  = 0; out[10] = (far+near)/(near-far);       out[11] = -1;
    out[12] = 0;        out[13] = 0; out[14] = (2*far*near)/(near-far);     out[15] = 0;
  }
  function mat4Identity(m) {
    m[0]  = 1; m[1]  = 0; m[2]  = 0;  m[3]  = 0;
    m[4]  = 0; m[5]  = 1; m[6]  = 0;  m[7]  = 0;
    m[8]  = 0; m[9]  = 0; m[10] = 1;  m[11] = 0;
    m[12] = 0; m[13] = 0; m[14] = 0;  m[15] = 1;
  }
  function mat4Translate(out, x, y, z) {
    out[12] += out[0]*x + out[4]*y + out[8]*z;
    out[13] += out[1]*x + out[5]*y + out[9]*z;
    out[14] += out[2]*x + out[6]*y + out[10]*z;
    out[15] += out[3]*x + out[7]*y + out[11]*z;
  }

  // -- Setup projection & modelView matrix --
  const projectionMatrix = new Float32Array(16);
  mat4Perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100);

  const modelViewMatrix = new Float32Array(16);
  mat4Identity(modelViewMatrix);
  mat4Translate(modelViewMatrix, 0, 0, -4); // move sphere away from camera

  // -- Render function --
  function drawScene() {
    gl.clearColor(0.0, 0.0, 0.0, 0.0)
    gl.clearDepth(1);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(shaderProgram);

    // Bind position buffer & set up 'aPosition'
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.enableVertexAttribArray(aPositionLoc);
    gl.vertexAttribPointer(aPositionLoc, 3, gl.FLOAT, false, 0, 0);

    // Set matrices
    gl.uniformMatrix4fv(uProjectionMatrix, false, projectionMatrix);
    gl.uniformMatrix4fv(uModelViewMatrix,  false, modelViewMatrix);

    // -- 1) Draw horizontal lines in RED --
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, horizontalIndexBuffer);
    gl.uniform4f(uColorLoc, 1.0, 0.0, 0.0, 1.0);
    gl.drawElements(gl.LINES, sphereData.horizontal.length, gl.UNSIGNED_SHORT, 0);

    // -- 2) Draw vertical lines in BLUE --
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, verticalIndexBuffer);
    gl.uniform4f(uColorLoc, 0.0, 0.0, 1.0, 1.0);
    gl.drawElements(gl.LINES, sphereData.vertical.length, gl.UNSIGNED_SHORT, 0);
  }

  drawScene();
})();

Salesforce: Connected App - ( OAuth2.0 Debugging Tool ! =)

Daniel Chahla — Thu, 13 Feb 2025 00:39:11 +0000

Finally a community Salesforce guide, that works! A minimalist tool for testing and debugging OAuth2 configurations for Salesforce Connected Apps rapidly.

This tool provides an interactive web interface and backend service (running on port 3000) to help you quickly validate OIDC metadata, construct authorization requests with PKCE support 😲, and exchange authorization codes for tokens. The easily extendable, one-page frontend, styled with Tailwind CSS <-- 🏓 communicates bidirectionally 🏓 --> with the backend via WebSocket, making it easy to see responses in real-time while keeping data private.

Key features include:

fetching OIDC metadata from your connected app’s well-known endpoint
interactive forms to configure OAuth2 parameters (client ID, secret, callback URL, etc.)
automatic generation of PKCE code challenges and verifiers
constructing authorization URLs and handling callback redirects
debugging token requests with raw JSON responses

Run it locally to streamline your Salesforce OAuth2 connection settings and configuration.

TO RUN LOCALLY :

npm i
npx tsc
node dist/index.js

EXAMPLE USAGE..

1) Enter your `.../.well-known/openid-configuration` URL to autopopulate available options. Then Click 'Send'.

2. Enter the client_id (Consumer Key) and, if required, the client_secret (Consumer Secret) based on your app configuration, as seen in yellow.

3) Click "Generate PKCE"

4. Click "Construct Request" and follow the link "Authorize with Salesforce" to authenticate and return to the callback URL (this app listens for http://localhost:3000/callback, this must match your Connected App config. See bottom Set-up.)

5. Paste the code and click 'Exchange for Token'.

6. a. Get Result (access || id) token on success.

6. b. Errors are returned as well.

EXAMPLE SETUP

Required Client Secret Location

https://github.com/dchahla/salesforce-connected-app-oauth2-debugger
Open to pull requests, or feature requests. If this helped throw me a star! If you are Salesforce, throw me a job and some stock options!

Cheers!

SVG charts from scratch in 2024 (a better AWS visualization system)

Daniel Chahla — Mon, 19 Feb 2024 19:59:08 +0000

If someone asked, “How does this picture make you feel?” and presented the following image, I would respond something like: the company running the world’s infrastructure can’t make a responsive website.

Backend and Dev-Ops are hard. So is UX. I’m sick of people being “above” visual design, but prefer using a Mac.

You have an opinion. You like things; it’s why you use zsh over shell, VS Code over Notepad++, etc.

So, don’t throw shade at a discipline you have successfully avoided throughout your career. Embrace the things you love; show it in your work.

God forbid someone wants to check the status of an alert while not on a computer. It’s 2024; let’s build something better. To do that, we must start with some requirements.

The charts shall…

Be dynamically constructed as SVGs on the client’s side.
Allow for the inspection of a specific point.
Have proper labels with units of measure.
Print data clearly for all devices.
Be able to invalidate cached data and re-render.
Be a drop-in using vanilla js, so there are no excuses, licenses, or versions.
Not make you want to switch to Azure.

Before building, you will need a JSON-valid flat array of the data you want to chart. This is the simplest way to be on the same page and focus on the hard part 😉. Here is an example of the data we will be using:

// metrics.json [ { "url": "https://weather.com", "content-size": 0, "nanoseconds": 4890831, "seconds": 0.004890831, "bytes-per-second": 0 }, { "url": "https://amazon.com", "content-size": 6591, "nanoseconds": 617613938, "seconds": 0.617613938, "bytes-per-second": 10671.71511922712 }, { "url": "https://sugarbeats.com", "content-size": 1591459, "nanoseconds": 893689449, "seconds": 0.893689449, "bytes-per-second": 1780774.0728960983 }, { "url": "https://youtube.com", "content-size": 868768, "nanoseconds": 968598554, "seconds": 0.968598554, "bytes-per-second": 896932.9929435349 } ]

data[0]
├── string "url": "https://weather.com"
└── number "content-size": 0,
└── number "nanoseconds": 4890831,
└── number "seconds": 0.004890831,
└── number "bytes-per-second": 0

Now that we are on the same page about how the data should look, let’s build!

First, we will need an HTML element to attach our logic. While this can be dynamically created in JavaScript, I prefer explicitly setting the width and height to see how it fits on mobile immediately. Say, iPhone SE, as seen below.

<svg id="barChartNanoseconds" class="chart" width="500" height="340"></svg>

To avoid recreating a situation in which we are plotting points but cannot determine their units of measure.

Let’s tackle the Y-labels next.

The calculateYLabels function below determines the position of our chart’s Y-axis labels. It takes in the data and computes the range of values present within the dataset. Once the range is established, it evenly divides the available vertical space (in Pixels) to generate a list of labels that accurately represent the data points along the Y-axis. This ensures that the labels are evenly distributed and appropriately scaled, regardless of the specific values in the dataset. At the same time, maximizing the utilization of the chart’s visual space.

const calculateYRangeLong = (metric, maxLabels = 10) => {
  const maxValue = Math.ceil(Math.max(...data.map(item => item[metric])))
  const step = Math.ceil(maxValue / maxLabels)
  const range = Array.from({ length: maxLabels + 1 }, (_, i) => i * step)
  return range
}

const calculateYLabels = metric => {
  const range = calculateYRangeLong(metric) 
  console.log(range)
//[0, 96859856, 193719712, 290579568, ..., 871738704, 968598560]

// 300px : svg.height.baseVal.value === 340; 340-(4*10)px per data point
  const yScale = 300 / range.length 
  return range.map((value, index) => ({
      y: 300 - index * yScale, 
      label: value
  }))
}

I’ve broken this task up into two functions for readability. calculateYRangeLong returns a range (Array) with even steps between min and max values.

It could be written several different ways. Spread operators are just so hot right now. Of course, maxLabels could be amended, but for the sake of brevity and mobile, I’m going to cap mine at ten good notches with 11 Pixels each.

const yLabels = calculateYLabels("nanoseconds");
console.log(yLabels);
// [
//     {
//         "y": 300, // distance from top with room for title
//         "label": 0
//     },
//     {
//         "y": 272.72727272727275, // distance from top with room for label 0 
//         "label": 96859856
//     },
....
//     {
//         "y": 27.272727272727252, // distance from top of last data point
//         "label": 968598560
//     }
// ]

Finally, we put it all together.

The createBarChart function calculates the spacing between each data point on the X-axis to ensure optimal distribution within the chart’s width. This calculation is based on the width of the SVG element and the number of data points to be displayed, allowing for automatic adjustment with dynamic datasets.

const createBarChart = (svgId, choice, unit) => {
  const svg = document.getElementById(svgId)
  const yLabels = calculateYLabels(choice)

  yLabels.forEach((label, index) => {
      const newYLabel = document.createElementNS(
          'http://www.w3.org/2000/svg',
          'text'
      )
      newYLabel.setAttribute('id', `label${index}`)
      newYLabel.setAttribute('x', 0)
      newYLabel.setAttribute('y', label.y)
      if (label.label === 0 && unit) {
          newYLabel.textContent = label.label + ` (${unit})`
      } else {
          newYLabel.textContent = label.label.toString().substring(0, 79)
      }
      newYLabel.setAttribute('font-size', '11')
      svg.appendChild(newYLabel)
  })
  const histogram = data.reduce((acc, obj) => (Object.entries(obj).forEach(([key, value]) => key !== 'url' && (acc[key] = (acc[key] || 0) + 1)), acc), {});
  const labelXPadding = 7 //space between rect-label and rect
  const labelXMargin = 93 //max size of our Y-labels in px
  const spaceBetween = (svg.width.baseVal.value / histogram[choice]) - labelXPadding

  data.forEach((item, index) => {
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
      const recty = item[choice] * calculateYScale(choice)

      rect.setAttribute('id', `rect${index}`)
      rect.setAttribute('x', index * spaceBetween + labelXMargin + labelXPadding)
      rect.setAttribute('y', 300 - recty)
      rect.setAttribute('width', 10)
      rect.setAttribute('height', recty)
      svg.appendChild(rect)

      text.setAttribute('x', index * spaceBetween + labelXMargin)
      text.setAttribute('y', 300)
      text.style.transform = 'rotate(-90deg)'
      text.style.transformOrigin = `${index * spaceBetween + labelXMargin}px ${300}px`
      text.textContent = item.url
      svg.appendChild(text)
  })


  const svgRect = svg.getBoundingClientRect()
  const ChartLabel = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'text'
  )
  ChartLabel.setAttribute('x', svgRect.width / 2)
  ChartLabel.setAttribute('y', svgRect.height - 330)
  ChartLabel.classList.add('tableTitle')
  ChartLabel.textContent = `[${choice}]`
  svg.appendChild(ChartLabel)
}


createBarChart('barChartNanoseconds', 'nanoseconds', 'ns');

It’s important to note that adjustments may be needed based on the amount of data and design requirements of your chart. For instance, in a time-series chart with numerous points, you might consider adjusting the width of the data rectangle (10 pixels) and dropping the X-axis label for better visualization clarity. Or… incorporate a horizontal scroll!

Fine-tuning: If you are a stickler like me, calculateYScale provides a mechanism for adjusting the vertical positioning of data points relative to the Y-axis, ensuring accurate representation and alignment within the corresponding Y-Axis Label.

const calculateYScale = metric => {
    const maxValue = Math.max(...data.map(item => item[metric]))
    return 278 / maxValue // 11 px font size * 2 (0 label + title of chart)
}

Our finished product.

You can play with the Codepen

Or, see it in action