Google Charts displays currency values without decimal places

I've been working on a project that involves the Google Visualization API. I successfully formatted the y-axis values of my chart to display in currency using vAxis: {format: 'currency'} in the options. However, I'm struggling to figure out how to remove the cent values.

You can check out what my chart looks like here: Chart

Below are the options I'm currently using:

var options = {
      chartArea: {width: '90%', height: '80%'},
      vAxis: {format: 'currency', ticks: [0, 20000, 40000, 60000]},
      colors: ['#4285f4'],
      legend: {position: 'none'}
    };

On the vAxis, it's displaying marks at $0.00, $20,000.00, $40,000.00, and $60,000.00. I'm aiming to have it show marks at $0, $20,000, $40,000, and $60,000 instead.

Any assistance would be greatly appreciated. Thank you!

javascripthtmlcsschartsgoogle-visualization

Answer №1

try using a personalized formatting choice...

format: '$#,##0'

alternatively, you have the option to input both the actual value and its formatted counterpart in the ticks selection...

ticks: [
  {v: 0, f: '$0'},
  {v: 20000, f: '$20,000'},
  {v: 40000, f: '$40,000'},
  {v: 60000, f: '$60,000'}
]

Answer №2

Utilize the toFixed() function on your currency values. You have the option to specify the desired number of decimal places within parentheses. For instance, using variable.toFixed(2).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Layering one div on top of another div

I have a vision of what I want: Here is the code I came up with: HTML <div class="main_container"> <div class="team1">team 1</div> <div class="vs">VS</div> <div class="team2">team 2</div> </div> CSS . ...

htmlcss

Transform a callback-based function into an Async Iterator version

Situation I have a function with an asynchronous callback structure, like so: let readFile: (path: string, callback: (line: string, eof: boolean) => void) => void However, I would much rather use a function that follows the AsyncIterable/AsyncGen ...

javascripttypescriptasynccallbackasync-iterator

Is there a way to obtain the tasklist result of exec() from child_process and convert it to JSON format?

When I use the tasklist command with child_process, the stdout returns processes in Unicode string format that is not easily queryable. Here is the code snippet: var exec = require('child_process').exec; ... exec('tasklist', function( ...

javascriptjsonchild-processtasklist

How to correctly pass values in AngularJS functions

Here is a function that takes a description variable as a parameter $scope.relsingle = function(description) { console.log(description); var url = $scope.url+'/api/descrelation?limit=4&description='+description; $http.get(url).su ...

javascriptangularjsangularjs-scopeangularjs-ng-init

Pagination CSS may fail to function properly in Chrome after an AJAX call is returned

Having an issue with CSS not getting applied correctly after making an AJAX call with pagination. The problem seems to be specific to Chrome, as it works fine in Firefox. When inspecting the element, the CSS is present but not being applied properly until ...

jquerycssajaxwordpresspagination

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

javascriptjqueryhtmlforms

learning how to combine two json arrays of objects and showcase them in a react component

What is the best way to combine this data and present it in a table with a map using React? The text will be in the first column and the count in the second. const handleSubmit = async (event) => { event.preventDefault(); let URL1 = " ...

javascriptreactjsoop

The ultimate guide to retrieving inner API data within ReactJS

I am trying to retrieve the inner data from blog_set. However, I seem to be receiving a null value or no output at all. Is this the correct method to access the value: {bloglist.blog_set.title} ? API data: [ { "url": "http://localhost:8000/ap ...

javascriptreactjs

Expanding Height in CSS Box Layout

I am struggling to create a Box Layout that expands all the way down to the bottom of the display. I have tried using height : 100%; and min-height: 100%;, but the boxes still do not stretch to the bottom. Is there a solution to make these boxes expand fr ...

htmlcss

Refreshing the Angular directive following a change in the scope variable

Just getting started with Angular and I've encountered a small issue. Within my template for SirroccoListing, I have the following code. Sirrocco is a directive: <h3>All Sirroccos</h3> <div sirrocco ng-repeat="sirrocco in sirroccos" ...

javascriptangularjs

Insert a fresh <input> field into a <ul> list once the previous input within the list is filled out

Check out my example setup here: http://jsfiddle.net/t7CKU/ Take a look at the jQuery code I'm using: var attr_index = 0; $(document).on("propertychange keypress input paste", ".--variant-val-ul input:last", function (e) { var keyCode = e.k ...

javascriptjquery

Images will only be displayed if the optional html parameter is included; otherwise, they will be hidden

In my parent component, there is an image displayed at a specific path (note: the image is already stored in my project). This path can optionally have additional parameters. If the For instance, The image is visible (image) when the HTML path is: ww ...

javascripthtmlcssimagereactjs

What is the prescribed interface or datatype for symbol type in TypeScript with JavaScript?

I have a set of symbol values in JavaScript that I want to convert to TypeScript. // Defining object values in JavaScript const size = { Large: Symbol('large'), Medium: Symbol('medium') } What is the most efficient method to conv ...

javascripttypescript

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Preventing special characters in an HTML text box: Tips and tricks

I'm facing an issue with my HTML form where special characters like ! or ^ or £ in the password text box are being converted to different characters on my server, such as %. Is there a way to ensure that the exact same characters entered by the user ...

javascripthtml

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss

Printing array of API results in NodeJS using ExpressJS

I have been working with the Twitter API to retrieve tweets and store them in an array. I am looking to print the entire array on my HTML document for display purposes. Excited to see it work! Thanks! Check out the code snippet below: var express = requi ...

javascriptnode.jsexpresstwitter

Issue with displaying custom error message on Mysqli connection

Currently following a tutorial from an individual who has provided the below code snippet: <?php require_once "connect.php"; $connection = @new mysqli($host, $db_user, $db_password, $db_name); if ($connection->connect_errno != 0) { e ...

phphtmlxampp

"Transferring a C# dictionary into a TypeScript Map: A step-by-step

What is the correct way to pass a C# dictionary into a TypeScript Map? [HttpGet("reportsUsage")] public IActionResult GetReportsUsage() { //var reportsUsage = _statService.GetReportsUsage(); IDictionary<int, int> te ...

javascriptangulartypescriptasp.net-coreasp.net-web-api