The legends on the Google chart are having trouble being displayed accurately

Take a look at the screenshot below to pinpoint the sample issue. While loading the graph UI with Google Charts, the legends data is showing up but not appearing correctly. This problem seems to occur more frequently on desktops than on laptops. Any advice on how to address this?https://i.stack.imgur.com/UmJgS.png

javascriptangularjschartsgoogle-visualizationgoogle-developer-tools

Answer №1

this issue arises from the chart being drawn in a hidden container

to illustrate, refer to the following functioning snippet,
the chart remains concealed until it is fully rendered,
and then displayed upon triggering the 'ready' event of the chart
the outcome mirrors the image provided 

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'year', type: 'date'},
    {label: 'Annual Sales', id: 'Sales', type: 'number'},
    {label: 'Annual Expenses', id: 'Expenses', type: 'number'},
    {label: 'Annual Profit', id: 'Profit', type: 'number'}],
    [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
    [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
    [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
    [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
    [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
    [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
    [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
    [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    bars: 'horizontal',
    hAxis: {
      format: 'decimal'
    },
    vAxis: {
      format: 'yyyy'
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    isStacked: true,
    bar: {
      groupWidth: '90%'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });

  chart.draw(data, google.charts.Bar.convertOptions(options));
});
.hidden {
  display: none;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

to address this concern,
ensure that the chart's container is visible,
prior to its initial drawing
refer to the following operative snippet... 

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'year', type: 'date'},
    {label: 'Annual Sales', id: 'Sales', type: 'number'},
    {label: 'Annual Expenses', id: 'Expenses', type: 'number'},
    {label: 'Annual Profit', id: 'Profit', type: 'number'}],
    [{v:new Date('2014'), f:'2014'}, 0, 400, 200],
    [{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
    [{v:new Date('2015'), f:'2015'}, 0, 460, 250],
    [{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
    [{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
    [{v:new Date('2016'), f:'2016'}, 600, 0, 0],
    [{v:new Date('2017'), f:'2017'}, 0, 540, 350],
    [{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
  ]);

  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    bars: 'horizontal',
    hAxis: {
      format: 'decimal'
    },
    vAxis: {
      format: 'yyyy'
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    isStacked: true,
    bar: {
      groupWidth: '90%'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);
  chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer №2

select the option "utilize row 1 as headers" found in the edit chart section on the "Data" tab

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

Using Vue.js, is it possible to apply a class to a clicked element and then remove it when another element is clicked?

While developing an app using Vue.js, I have run into an issue. I am familiar with how to solve this problem using jQuery, but I am struggling to find a solution within my Vue app. Let me explain quickly - I have a list of items and I want to assign a spec ...

javascriptvue.js

What's the best approach: Backbone-Relational discovery or retrieval?

Although the model caching feature in Backbone-Relational is effective, loading a simple model securely requires considerable code. For example: // Attempt to locate a model in the cache this.model = MyModel.find({id:id}); if(this.model){ // Model re ...

javascriptbackbone.jsbackbone-relational

Why isn't my Vue.js application automatically refreshing when I add or remove an object from the array?

In my Quasar and Vue.js project, I am working on a form where I can add objects to an array for insertion into the database simultaneously. However, I am facing an issue where the additions or deletions in the array only reflect on the screen after focusin ...

javascriptvue.jsquasar-framework

Sending SQL data to a Node.js module upon receiving a client request

Currently, I am establishing a connection to a SQL database and retrieving data on the view by using res.json. The client initiates a request - my server employs an MSSQL driver and a connection string to establish a connection with the database and fetch ...

javascriptsqljsonnode.jsexpress

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

javascriptjqueryhtml

Converting JavaScript numbers into years and months format

Given an integer, for example 20, I am trying to calculate how many months and years are represented by that number. For 20, the result would be 1 year and 8 months. How can this be achieved using JavaScript? switch (props.term) { case (props.term ...

javascript

Retrieving a numerical value from a string using Javascript or JQuery

Here is an example string: "example example-5 amount-10 example direction-left" Is there a way to extract the number following "amount-", and the text immediately after "direction-" in this string? ...

javascriptjquerystring

In the realm of JavaScript, removing a DOM element can sometimes feel like an

For my project, I am using JavaScript, DOM, and AJAX to create pages. I am trying to figure out how to check if an element already exists and, if it does, remove it. This is what I have tried: var elementL = document.getElementById('divLogin'); ...

javascriptjqueryajaxdom

Guide on how to retrieve the parent element's number when dragging starts

Within my div-containers, I have a collection of div-elements. I am looking to identify the parent number of the div-element that is currently being dragged For example, if Skyler White is being dragged, the expected output should be "0" as it is from the ...

javascript

Utilizing dynamic data within the ng-template

As a newcomer to Angular, I am facing a challenge in passing a string into a template. My goal is to create a reusable template or component that can display instructions on how to proceed with an action. Currently, I am achieving this by using the follow ...

javascriptangular

Using react-hook-form to easily update form data

While working on my project with react-hook-form for updating and creating details, I encountered a problem specifically in the update form. The values were not updating properly as expected. The issue seems to be within the file countryupdate.tsx. import ...

javascriptreactjstypescriptreact-hook-form

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

Use Select2 for efficient selection

I am attempting to implement select2 for a multi-select dropdown list of states, but I am encountering an issue. Typically, when you type in an option, it should be highlighted so that you can press enter to select it. However, in my case, it underlines t ...

javascriptjqueryjquery-select2

Can Ajax be utilized to invoke an internal function within a web application?

Brand new to PHP, this is a whole new world for me. Currently, I am attempting to dynamically update a drop down list from 1-10 based on the selection of a previous drop down list. The initial drop down list allows you to choose tables numbered 1-35, whil ...

javascriptphpjqueryajax

Count Scroller - Finding a Solution for _.debounce

Issue with Counter I have a counter that should increase or decrease by one each time the user scrolls up or down. The problem I'm facing is that my counter $('html').on('mousewheel', function (e) { var delta = e.originalEve ...

javascriptjqueryfunctionunderscore.jscounter

PHP MySQL - Automatically trigger email notification upon insertion of a new record

Is there a way to trigger an email alert only when a new record is added, not when the user edits input fields in a table? The database I'm working with stores equipment delivery dates. Users schedule deliveries and input the dates into a SQL Server ...

javascriptphpjquerymysql

Unable to transmit an object containing a property that includes an array of other objects

I am attempting to send an object that has the following structure: var postBody = { id: userID, objectID: [0, 1], objects: [ {id: 0, x: 0.33930041152263374, y: 0.08145246913580247, width: 0.0823045267489712, height: 0. ...

javascriptjqueryjsonajaxnode.js

"Encountering a new error with the creation of a user using AngularJS and Firebase

Attempting to create a user using Angular. myApp.controller('loginCtrl',['$scope','$firebaseAuth','config',function($scope,$firebaseAuth,config){ console.info('[APP-INFO] ~ loginCtrl Start') var ref = ne ...

javascriptangularjsfirebase

Capturing and uploading pictures in Ionic-Angular.js: no images available for sending to server

After successfully utilizing a custom directive to upload images to my server using Angular.js, I ventured into implementing the camera functionality from Cordova. However, when attempting to connect the two processes, the images sent to the server are sto ...

angularjscordovafile-uploadcameraionic-framework

What is the best way to transfer attribute values from multiple elements and paste them each into a separate element?

I have multiple elements with the tag <a class="banner2">. Each of these elements has a different URL for the background image and href value. <a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_templat ...

javascriptphpjqueryhtmlcss