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

Resolving the CORS preflight issue with Loopback API in Redux

My current setup involves a client application running on React-Redux and an API app on Loopback. During local testing, I have the client app on port 8080 and the server app on port 3000. While attempting to test Google OAuth (using the loopback-passport ...

javascriptreactjscorsreduxloopbackjs

Refreshing the Date Display with AJAX Response

Within a view, there is a DisplayFor connected to a DateTime field in the Model. After an AJAX call returns a Date to update the field, I am able to convert the AJAX date into a MM/DD/YYYY format. However, using .val to set the DisplayFor does not reflect ...

javascriptjqueryajaxdatetimeasp.net-mvc-5

Verify if a specific key is present in associative arrays

Can you please explain the correct way to check for the existence of a key in associative arrays? For instance: var mydata = { key1: '', key2: { subkey1: { subkey1_1: { value1: '' ...

javascriptjqueryundefinedassociative-arrayexists

Display and conceal frequently asked questions using JQuery

I'm currently facing an issue with using JQuery to toggle between showing and hiding content when a user clicks on a specific class element. Here is my HTML code: <div class="faqSectionFirst"> Question? <p class="faqTextFirst" style=' ...

javascriptjquery

Executing a JavaScript function within Python using Selenium: A beginner's guide

Within my JavaScript, there is a function called 'checkdata(code)' which requires an argument named 'code' to execute and returns a 15-character string. I recently discovered how to call functions without arguments in JavaScript. Howev ...

javascriptpythonseleniumselenium-webdriver

JavaScript validation controls do not function properly when enabled on the client side

Following the requirements, I have disabled all validation controls on the page during the PageLoad event on the server side. When the submit button is clicked, I want to activate the validations and check if the page is valid for submission. If not, then ...

asp.netjavascriptasp.net-2.0

Using jQuery to apply a class based on JSON data

This file contains JSON data with details about seat information. var jsonData = { "who": "RSNO", "what": "An American Festival", "when": "2013-02-08 19:30", "where": "User Hall - Main Auditorium", "seats": ["0000000000000000001111111 ...

javascriptjqueryjsonclassobject

I am unable to select the first item when using select2.js and setting a placeholder

I am experiencing an issue with my <select> list that is styled using select2.js. Everything seems to be functioning properly, except for when a placeholder is used. Users are unable to select the first item in the list initially. If they choose any ...

javascriptjqueryjquery-select2

Update the value of a JavaScript variable in an HTML template by targeting the element with a specific

Within my testFile.html HTML file, the following code is present: <div id="image-type-placeholder">marinaa</div> In my JavaScript file: const CourseImageUpload = BaseComponent.extend({ /** * @property {function} */ templat ...

javascripthtml

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

Guide to integrating and utilizing a personalized JavaScript file within TypeScript components in an Angular 2 application

I have created a standard Angular 2 App using angular-cli. Now, I am trying to incorporate a custom .js file into it. Here is a simplified version of what the file looks like: 'use strict'; var testingThing = testingThing || {}; testingThing. ...

javascriptangularjstypescripttypescript-typingsexternal-dependencies

Tips on how child component can detect when the object passed from parent component has been updated in Angular

In the child component, I am receiving an object from the parent component that looks like this: { attribute: 'aaaa', attribute2: [ { value }, { value }, { value }, ] } This object is passed to th ...

javascriptangulartypescript

Unveiling Parameters from a Function Transferred as an Argument to Another Function in JavaScript

I'm just getting started with JavaScript and I've encountered a small program where a function takes another function as an argument. My goal is to figure out how to extract or access the arguments of that passed in function. Here's a specif ...

javascriptfunctionarguments

What is the method for determining if a given point falls within a 3-dimensional cube?

I am currently seeking a method to determine whether a location is situated inside a rotated cube. To provide some context, I have access to the coordinates (x,y,z), rotation values (x,y,z), and dimensions (x,y,z). I am working with Javascript for this pr ...

javascriptnode.jsmathlocationcube

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

Hello, I attempted to install the express package in a React project. However, when I try to import the package inside app.js using: const app = require("express"); I encounter 30 errors all stating: Module not found Error: Can't resolve 'x&ap ...

javascriptnode.jsreactjsexpressnpm-install

Custom AngularJS directive fails to reflect changes in model after selecting a file

I recently created a custom directive called ng-file-chosen, which is supposed to capture the selected file name from an <input> element and bind it to the ng-model passed in. In the code snippet below, the result of ng-file-chosen is linked to mode ...

javascripthtmlangularjsangularjs-directive

PHP encountering a bad escaped character while parsing JSON using JSON.parse

I'm encountering an issue with JSON parsing. In my PHP code, I have the following: json_encode(getTeams(),JSON_HEX_APOS); This returns a large amount of data. Sample data: To provide more clarity, let's assume I have this: my_encoded_data ...

javascriptphpjqueryjson

Showing information retrieved from an API and rendering it on an HTML page

My aim is to showcase a list of calculated results fetched from a local server. In the console, this data appears as an array of objects, but on the webpage, it is being displayed as separate string characters for each li element. How can I display the con ...

javascriptjsonfetch

Twitter typeahead not functioning properly when used in conjunction with ajax requests

I have limited experience in the frontend world and I'm currently working on getting this to function properly. $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 6 }, { source: function (query, ...

javascriptjqueryajaxjsontwitter-typeahead

Is there a way to halt the compiler until an Ajax request is fully processed?

Within my form, there is a field labeled parent keywords as a secret key. The validation of this form using JavaScript functions smoothly. It is designed to check if the secret key is associated with any parent or not. If not, the value is set to 0 by defa ...

javascriptphpjqueryajaxcompiler-construction