Color-encoded bar chart

by Flexmonster Pivot 3

HTML

<script src="https://cdn.flexmonster.com/3.0/latest/flexmonster.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.flexmonster.com/3.0/latest/flexmonster.css"
  type="text/css"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/6.1.0/echarts.min.js"></script>

<div id="pivot-table" style="height: 350px;"></div>
<div id="chart" style="width: 100%; height: 500px;"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles-fm3.css);

#chart { 
  background: #fbfbfb; border-radius: 10px;
  border: 1px solid #dde3dc;
  margin-top: 15px;
}

JavaScript

const state = {
  id: "fm-state",
  dataset: {
    dataSource: {
      type: "json",
      url: "https://cdn.flexmonster.com/data/outdoor-gear-sales.json",
    },
    filters: [
      {
        fieldName: "Country",
        exclude: [
          "Australia",
          "United States",
          "Japan",
          "South Korea",
          "Brazil",
          "Singapore",
          "Netherlands",
        ],
      },
    ],
  },
  slice: {
    columns: [
      {
        fieldName: "Year",
      },
      {
        fieldName: "Values",
      },
    ],
    rows: [
      {
        fieldName: "Country",
      },
    ],
    values: [
      {
        fieldName: "Revenue",
      },
    ],
    category: {
      fieldName: "Country",
    },
    seriesValues: [
      {
        fieldName: "Revenue",
        aggregation: "sum",
      },
      {
        fieldName: "Discount %",
        aggregation: "average",
      },
    ],
  },
};

const pivotTable = fm3.Controls.PivotTable("#pivot-table", {
  state: state,
});

const echart = echarts.init(document.getElementById("chart"));

const FONT = "Arial, sans-serif";
const colors = {
  line: "#dde2dc",
  muted: "#5c6b61"
}
const axisText = { 
  color: colors.muted, 
  fontFamily: FONT, 
  fontSize: 12 
};

echart.setOption({
  tooltip: {
    trigger: "item",
    formatter: function (p) {
      let r = p.value;
      return (
        "<b>" +
        r[0] +
        "</b><br>Revenue: " +
        money(r[1]) +
        "<br>Avg discount: " +
        (+r[2]).toFixed(1) +
        "%"
      );
    },
  },
  xAxis: {
    type: "value",
    position: "top",
    name: "Revenue (USD)",
    nameLocation: "middle",
    nameGap: 28,
    nameTextStyle: axisText,
    axisLabel: Object.assign({
      formatter: function (v) {
        return v >= 1000 ? "$" + v / 1000 + "k" : "$" + v;
      },
    }),
    splitLine: { lineStyle: { color: colors.line } },
...