Spline chart: number formatting

Integration with Highcharts

by Dongor7

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://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>

<table cellpadding="10">
	<tr>
		<td>
			<div id="pivot-container"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="highcharts-container" style="width: 100%; height: 300px; display: inline-block;"></div>
		</td>
	</tr>
  <tr>
		<td>
			<table id="table"></table>
		</td>
	</tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

#table {
  margin-bottom: 50px;
  border-collapse: separate;
  border: 1px solid black;
}

#table td {
  text-align: center;
}

JavaScript

var pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
    report: {
      dataSource: {
        filename: "https://www.flexmonster.com/fm_uploads/2020/06/data-highcharts.json"
      },
      slice: {
        rows: [{
          uniqueName: "Region"
        }],
        columns: [{
          uniqueName: "[Measures]"
        }],
        measures: [{
          uniqueName: "Quantity"
        }, {
          uniqueName: "Price",
          format: "currency"
        }, {
          uniqueName: "Discount",
          format: "currency"
        }],
      },
      options: {
        grid: {
          showHeaders: false
        }
      },
      formats: [
        {
          name: "",
          thousandsSeparator: " ",
          decimalSeparator: ".",
          decimalPlaces: 2,
          maxDecimalPlaces: -1,
          maxSymbols: 20,
          currencySymbol: "",
          currencySymbolAlign: "left",
          nullValue: "",
          infinityValue: "Infinity",
          divideByZeroValue: "Infinity",
          textAlign: "right",
          isPercent: false
        }, {
          name: "currency",
          thousandsSeparator: " ",
          decimalSeparator: ".",
          decimalPlaces: 2,
          maxDecimalPlaces: -1,
          maxSymbols: 20,
          currencySymbol: "$",
          currencySymbolAlign: "left",
          nullValue: "",
          infinityValue: "Infinity",
          divideByZeroValue: "Infinity",
          textAlign: "right",
          isPercent: false
        }
      ]
    },
    height: 280,
    toolbar: true,
    reportcomplete: function() {
      pivot.off("reportcomplete");
      createChartWithBothAxesNumeric();
    }
  });
  
  function createChartWithBothAxesNumeric() {
    pivot.highcharts.getData(
      {
        type: "spline",
        valuesOnly: true,
        slice: {
          rows: [{uniqueName: "Business...