Annotation with symbols inside stacked bar charts using Google Chart API

Question

Annotation with symbols inside stacked bar charts using Google Chart API

622 Views Asked by Code Guy At 19 April 2025 at 10:27

I have a stacked bar chart where I need to annotate the bars with $ symbol as the profit and costs are currency.

I am successful in annotating of the bars without currency symbol but I am unable to display with the $ prefixed. Could anyone throw light on this

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load("current", {
 packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var bar_chart_data = [
 ["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
 ["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
 ["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
 ["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
 ["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
 ["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
 ["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
 ["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
 ["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]

 var data = google.visualization.arrayToDataTable(bar_chart_data);

 var view = new google.visualization.DataView(data);
 view.setColumns([0, 1, {
   calc: "stringify",
   sourceColumn: 1,
   type: "string",
   role: "annotation"
  }, 3,  // <-- include style column
  2, {
   calc: "stringify",
   sourceColumn: 2,
   type: "string",
   role: "annotation"
  }, 4  // <-- include style column
 ]);

 var options = {
  title: "Live individual material cost break-up (%)",
  width: 600,
  height: 400,
  bar: {
   groupWidth: "95%"
  },
  legend: {
   position: "none"
  },
  isStacked: 'percent',
        hAxis: {
                  title: 'Percentage',
                  textStyle: {
                     fontSize: 8,
                     fontName: 'Muli',
                     bold: false,
                  },
                  
                  titleTextStyle: {
                     fontSize: 12,
                     fontName: 'Muli',
                     bold: true,
                  }
               },
               
               vAxis: {
                  title: 'Material',
                  textStyle: {
                     fontSize: 10,
                     bold: false
                  },
                  titleTextStyle: {
                     fontSize: 12,
                     bold: true
                  }
               }, 

 };
    var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
    chart.draw(view, options);
}

</script>
  </head>
  <body>
    <div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Original Q&A

There are 1 best solutions below

**WhiteHat** · Accepted Answer

use google's NumberFormat class

you can create a pattern, and format each data column.

    var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
    formatCurr.format(data, 1);
    formatCurr.format(data, 2);

see following working snippet...

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load("current", {
 packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var bar_chart_data = [
 ["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
 ["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
 ["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
 ["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
 ["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
 ["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
 ["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
 ["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
 ["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]

 var data = google.visualization.arrayToDataTable(bar_chart_data);

    var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
    formatCurr.format(data, 1);
    formatCurr.format(data, 2);

 var view = new google.visualization.DataView(data);
 view.setColumns([0, 1, {
   calc: "stringify",
   sourceColumn: 1,
   type: "string",
   role: "annotation"
  }, 3,  // <-- include style column
  2, {
   calc: "stringify",
   sourceColumn: 2,
   type: "string",
   role: "annotation"
  }, 4  // <-- include style column
 ]);

 var options = {
  title: "Live individual material cost break-up (%)",
  width: 600,
  height: 400,
  bar: {
   groupWidth: "95%"
  },
  legend: {
   position: "none"
  },
  isStacked: 'percent',
        hAxis: {
                  title: 'Percentage',
                  textStyle: {
                     fontSize: 8,
                     fontName: 'Muli',
                     bold: false,
                  },
                  
                  titleTextStyle: {
                     fontSize: 12,
                     fontName: 'Muli',
                     bold: true,
                  }
               },
               
               vAxis: {
                  title: 'Material',
                  textStyle: {
                     fontSize: 10,
                     bold: false
                  },
                  titleTextStyle: {
                     fontSize: 12,
                     bold: true
                  }
               }, 

 };
    var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
    chart.draw(view, options);
}

</script>
  </head>
  <body>
    <div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Annotation with symbols inside stacked bar charts using Google Chart API

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CHARTS

Related Questions in GOOGLE-VISUALIZATION

Related Questions in GOOGLE-BARCHART

Trending Questions

Popular # Hahtags

Popular Questions