JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>


<div id="pivot-container"></div>
<div id="pivot-container2"></div>

CSS

#pivot-container .fm-charts-color-1 {
  fill: rgb(0, 164, 90) !important;
}

#pivot-container .fm-charts-color-2 {
  fill: rgb(223, 56, 0) !important;
}

#pivot-container .fm-charts-color-3 {
  fill: rgb(255, 184, 0) !important;
}

#pivot-container .fm-charts-color-4 {
  fill: rgb(109, 59, 216) !important;
}

#pivot-container .fm-charts-color-5 {
  fill: rgb(0, 117, 255) !important;
}

#pivot-container .fm-charts-color-6 {
  fill: rgb(206, 151, 230) !important;
}

#pivot-container .fm-charts-color-7 {
  fill: none !important;
}

#pivot-container2 .fm-charts-color-1 {
  fill: rgb(255, 99, 132) !important;
}

#pivot-container2 .fm-charts-color-2 {
  fill: rgb(255, 159, 64) !important;
}

#pivot-container2 .fm-charts-color-3 {
  fill: rgb(255, 205, 86) !important;
}

#pivot-container2 .fm-charts-color-4 {
  fill: rgb(75, 192, 192) !important;
}

#pivot-container2 .fm-charts-color-5 {
  fill: rgb(54, 162, 235) !important;
}

#pivot-container2 .fm-charts-color-6 {
  fill: rgb(153, 102, 255) !important;
}

#pivot-container2 .fm-charts-color-7 {
  fill: rgb(201, 203, 207) !important;
}


#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
  opacity: 70% !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  report: {
    dataSource: {
      filename:"data/retail-data.json"
    },
    slice: {
    rows:[{
    uniqueName:"Order Date.Month"
    }],
      columns: [{
          uniqueName: "Status"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price",
        format: "currency"
      }]
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      }
    },
    formats: [{
      name: "currency",
      currencySymbol: "$",
     
    }]
  }
});

let pivot2 = new Flexmonster({
  container: "pivot-container2",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  report: {
    dataSource: {
      filename: "data/retail-data.json"
    },
    slice: {
      columns: [{
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
                uniqueName: "Price",
                aggregation: "sum",
                format: "currency"
            },
            {
                uniqueName: "Sales",
                aggregation: "stdevs"
            },
            {
                uniqueName: "Quantity",
                aggregation: "sum"
            },
            {
                uniqueName: "Sum of Price2",
                formula: "sum('Price')",
                caption: "Sum of Price2"
            }]
    },
    options: {
      viewType: "charts",
      chart: {
      multipleMeasures: true,
        type: "column"
      }
    },
    formats: [{
      name: "currency",
      currencySymbol: "$",
    }]
  }
});