JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

CSS

body {
              font: 10px sans-serif;
            }

            .axis path,
            .axis line {
              fill: none;
              stroke: #000;
              shape-rendering: crispEdges;
            }

            .bar {
              fill: steelblue;
            }

            .x.axis path {
              display: none;
            }

            .y.axis path{
                display:none;
            }

           .y .axis .minor line {
  stroke: gray;
  stroke-dasharray: 2,2;
}

JavaScript

ParetoChartContext(600,453);

           function ParetoChartContext(myWidth,myHeight){
            //Width and height
            var margin = {top: 20, right: 20, bottom: 30, left: 40};           
            var width = myWidth - margin.left - margin.right;
            var height= myHeight - margin.top  - margin.bottom;
            var w = width;
            var h = height;

            
            // Created by generateSeriesJson
            var jsonData = [
  {
    "point": [
      {
        "id": "1470",
        "name": "470",
        "attributes": {
          "attribute": [
            {
              "xxx": "470: Major joint replacement or reattachment of lower extremity w/o MCC",
              "name": "itemName"
            },
            {
              "xxx": "DRG",
              "name": "itemType"
            },
            {
              "xxx": "470: Major joint replacement or reattachment \nof lower extremity w/o MCC",
              "name": "a1"
            },
            {
              "xxx": "470: Major joint replacement or reattachment of lower extremity w/o MCC",
              "name": "a2"
            },
            {
              "xxx": "3.691",
              "name": "averageGmlos"
            },
            {
              "xxx": "470",
              "name": "itemCode"
            }
          ]
        },
        "y": "1179"
      },
      {
        "id": "1775",
        "name": "775",
        "attributes": {
          "attribute": [
            {
              "xxx": "775: Vaginal delivery w/o complicating diagnoses",
              "name": "itemName"
            },
            {
              "xxx": "DRG",
              "name": "itemType"
            },
            {
              "xxx": "775: Vaginal delivery w/o complicating \ndiagnoses",
              "name": "a1"
            },
            {
              "xxx": "775: Vaginal delivery w/o complicating diagnoses",
              "name": "a2"
            },
            {
             ...