Custom Number Formatting in your chart

Adding prefix / suffix to numbers

We can add prefix / suffix to numbers using format attribute in schema.

Specify the format in schema

const numberFormat = (v) => `${v}$`;

const schema = [
  {
    name: "Sales",
    type: "measure",
    format: numberFormat,
  },

  {
    name: "Region",
    type: "dimension",
  },

  {
    name: "Category",
    type: "dimension",
  },
];

Set tickFormat in axis configuration. This tells muze to format the tick labels of x-axis using this format.

muze.canvas().config({
  axes: {
    x: {
     // Pass numberFormat function here that we defined above
     tickFormat: (v) => `${nf.format(v.rawValue)}$`
    }
  },
    interaction: {
                  tooltip: {
                    fieldFormatters: {
                      "Sales": (v) => `${nf.format(v.rawValue)}$`
                    }
                  }
                }
});

Example

  const { muze, getDataFromSearchQuery, env } = viz;

  const DataModel = muze.DataModel;

  const data = [
    [id,Market,Product Type,Product,Revenue,Expense,Profit,Order Count],
    [1, "South", "Tea", "Darjeeling", 24293, 7013, 6407, 134],
    [2, "South", "Tea", "Earl Grey", 14711, 8018, 2769, 110],
    [3, "West", "Tea", "Darjeeling", 21451, 9154, -56, 136],
    [4, "West", "Tea", "Earl Grey", 16007, 5337, -605, 57],
    [5, "East", "Tea", "Earl Grey", 31433, 3657, 9035, 142],
    [6, "East", "Tea", "Earl Grey", 22495, 9009, 2279, 122],
    [7, "West", "Tea", "Darjeeling", 10889, 5810, 9843, 146],
    [8, "North", "Tea", "Green Tea", 21092, 9112, 10867, 114],
    [9, "South", "Tea", "Earl Grey", 15000, 8244, 10397, 41],
    [10, "South", "Tea", "Darjeeling", 25677, 3391, 6214, 55],
    [11, "West", "Tea", "Green Tea", 22630, 10208, 17861, 63]
    // ...and so on...
  ]

  const schema = [
		{
				name: 'Profit',
				type: 'measure',
				format: (v) => `${v}$`
		},
		{
				name: 'Market',
				type: 'dimension'
		},
		{
				name: 'Product Type',
				type: 'dimension'
		}
    ];

  const parsedData = await DataModel.loadData(data, schema);
  const dm = new DataModel(parsedData);


  muze
    .canvas()
    .data(dm)
            .rows(['Region', 'Category'])
            .columns(['Sales'])
            .config({
                axes: {
                  x: {
                    tickFormat: (v) => {
                      return `${nf.format(v.rawValue)}$`
                    }
                  }
                },
                interaction: {
                  tooltip: {
                    fieldFormatters: {
                      "Sales": (v) => `${nf.format(v.rawValue)}$`
                    }
                  }
                }
            })
    .mount('#chart');

Adding comma separators to numbers

Specify format in schema:

const nf = new Intl.NumberFormat();
// This formats the numbers using commas
const numberFormat = (v) => `${nf.format(v)}$`;

const schema = [
  {
    name: "Profit",
    type: "measure",
    format: numberFormat,
  },
  {
    name: "Market",
    type: "dimension",
  },
  {
    name: "Product Type",
    type: "dimension",
  },
];

Set tickFormat in axis configuration.

muze.canvas().config({
  axes: {
    x: {
     // Pass numberFormat function here that we defined above
     tickFormat: numberFormat
    }
  }
});

Example

  const { muze, getDataFromSearchQuery, env } = viz;

  const DataModel = muze.DataModel;

  const data = [
    [id,Market,Product Type,Product,Revenue,Expense,Profit,Order Count],
    [1, "South", "Tea", "Darjeeling", 24293, 7013, 6407, 134],
    [2, "South", "Tea", "Earl Grey", 14711, 8018, 2769, 110],
    [3, "West", "Tea", "Darjeeling", 21451, 9154, -56, 136],
    [4, "West", "Tea", "Earl Grey", 16007, 5337, -605, 57],
    [5, "East", "Tea", "Earl Grey", 31433, 3657, 9035, 142],
    [6, "East", "Tea", "Earl Grey", 22495, 9009, 2279, 122],
    [7, "West", "Tea", "Darjeeling", 10889, 5810, 9843, 146],
    [8, "North", "Tea", "Green Tea", 21092, 9112, 10867, 114],
    [9, "South", "Tea", "Earl Grey", 15000, 8244, 10397, 41],
    [10, "South", "Tea", "Darjeeling", 25677, 3391, 6214, 55],
    [11, "West", "Tea", "Green Tea", 22630, 10208, 17861, 63]
    // ...and so on...
  ]

  const nf = new Intl.NumberFormat();
  const numberFormat = (v) => `${nf.format(v)}$`;

  const schema = [
		{
				name: 'Profit',
				type: 'measure',
				format: numberFormat
		},
		{
				name: 'Market',
				type: 'dimension'
		},
		{
				name: 'Product Type',
				type: 'dimension'
		}
    ];

  const parsedData = await DataModel.loadData(data, schema);
  const dm = new DataModel(parsedData);

  muze
    .canvas()
    .data(dm)
     .rows(['Region', 'Category'])
            .columns(['Sales'])
            .config({
                axes: {
                  x: {
                    tickFormat: (v) => {
                      return `${nf.format(v.rawValue)}$`
                    }
                  }
                },
                interaction: {
                  tooltip: {
                    fieldFormatters: {
                      "Sales": (v) => `${nf.format(v.rawValue)}$`
                    }
                  }
                }
            })
    .mount('#chart');