Shatter the labels of the legend on the Google chart

I am currently attempting to modify the legend of my chart using Google API Chart.

My goal is to display the legend labels with a line break, like this: ReleaseVersion
3, and have them displayed in the UI as separate entities.

Version
3

I have tried various methods in the code below but have had no success:


data.addColumn('number', 'Version<br>2');
data.addColumn('number', 'Version'+document.write('<br/>')+'3');
data.addColumn('number', 'Version'+ document.createElement("br")+' 3');

Is there a way to split the label text using a line break tag or any other method?

javascriptchartsgoogle-visualization

Answer №1

the legend labels will not accept html

however, you can utilize the line break character --> \n 

  data.addColumn('number', 'ReleaseVersion\n3.21.50');

refer to the following functional snippet...

please keep in mind that you might need to adjust the chartArea, to ensure sufficient space for the labels... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'ReleaseVersion\n3.21.48');
  data.addColumn('number', 'ReleaseVersion\n3.21.49');
  data.addColumn('number', 'ReleaseVersion\n3.21.50');
  data.addRows([
    ['1', 2, 1, 3],
    ['2', 2, 1, 1],
    ['3', 1, 2, 4],
    ['4', 0, 3, 0]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 24,
      height: '100%',
      left: 48,
      right: 200,
      top: 24,
      width: '100%'
    },
    height: '100%',
    legend: {
      position: 'right'
    },
    title: 'Title',
    width: '100%'
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

React JS - Sending props from Dev and Build to App component

Looking to include static assets and props in my App, specifically having image assets set with a base64 string in the build process. Want to ensure these assets are accessible to the App's props before development and build stages, similar to the fun ...

javascriptnode.jsreactjsbuild

Incorporate information produced by a Javascript function into PHP

I have developed a website which pulls data from a file (a time value) and initiates a Javascript timer. My goal is to use PHP to continue adding the current time to the loaded time, resulting in an incremental timer that resumes from where it was last l ...

javascriptphpajaxasynchronoussave

Webhost sending information to Windows sidebar gadget

Is there a way to showcase a list of information from a web host on a Windows sidebar gadget without using iframes? I've heard about using JavaScript AJAX (XmlHttpRequest) for this purpose, along with a refreshing function. Can anyone provide some gui ...

javascripthtmlcssajaxxmlhttprequest

Mock asynchronous calls in a React component using Jest

I am new to using jest/enzyme and I am facing a challenge in mocking a call to an asynchronous function that returns a Promise. This call is within a react component's componentDidMount method. The purpose of the test is to verify that componentDidMo ...

javascriptunit-testingreactjsjestjsenzyme

Is Implementing a Promise for Preprocessing in NodeJS Worth It?

Looking to achieve the following using NodeJS + Express: Client sends a post request with JSON document data={text: "I love Stackoverflow", shouldPreprocess: <true or false>}; Need to call an external WebSocket service for sentiment analysis on the ...

javascriptnode.jsexpresswebsocketpromise

Interactive PayPal quick checkout feature

Currently, I am in the process of developing an online store for a personal project and this piece of code is extracted from my application. <div class="row"> <script src="https://www.paypalobjects.com/api/checkout.js"></script> {{#e ...

javascriptexpresspaypalhandlebars.jscheckout

Determining Velocity of an Object in Three.js

Can anyone help me figure out how to calculate an object's velocity in three.js? I've checked the Object3D documentation but can't seem to find anything related to velocity. Appreciate any assistance, ...

javascriptthree.js

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

javascriptcssreactjsjestjsreact-table

Guide to using JavaScript to multiply the values from two text fields and showing the result in a separate text field

Here is the code that I am currently using: <script type="text/javascript"> $(function() { $("#addAll2").click(function() { var add = 0; $("#discount") = $dis $(".amt2").each(function() { ...

javascriptjqueryajax

Is it better to master JavaScript before diving into JQuery?

When diving into the world of JavaScript in 2012, is it more beneficial to start by learning JavaScript first and then move on to jQuery, or should one jump right into jQuery without prior knowledge of JavaScript? ...

javascriptjquery

Ways to access nested keys in a TypeScript object as well as an array containing objects

As I develop a form generator, my goal is to achieve type safety for a nested object and an array of objects. Specifically, I want the 'name' property to correspond to the key of the respective object it belongs to. For instance, in the scenario ...

javascriptreactjstypescriptrecursionecmascript-6

Exploring Substrings in jQuery/JavaScript

Issue Can anyone help me with locating a specific set of words within a string (gval in this scenario) that defines the specific wordset? if (gval.indexOf("define") > -1){ console.log("Hey! gval has Define"); } var gval = input.val().trim().toLowe ...

javascriptjquerystringkeyword

Identifying Equivalent Connections

Currently, I have a collection of link URLs obtained from a recent web crawl. As I delve into developing a visualization/path finding suite, I've encountered an issue with the dataset. Due to the fact that the website I crawled was created by humans, ...

javascripthtmlurlhyperlink

Dynamic Menu Highlight Styling

I'm having trouble highlighting the current menu item when clicked using CSS. Here is the code I have: #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a{ color: #fff; } #sub-header ul li.active{ background-color: #000; } #su ...

javascripthtmljquerycss

Analyzing a CSV file and executing asynchronous operations on specific columns with the help of ajax requests

I possess a CSV file that contains placement links and target links formatted as follows: CSV Example [placement url],[target url] [placement url],[target url] [placement url],[target url] My objective is to parse the CSV file line by line using JavaScri ...

javascriptjquery

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Can Modernizr and jQuery be combined to create a transition effect similar to CSS3 if it's not supported? My current approach looks like this... <div class="hoverable"> <p>This div changes both width and height on hover</p> </di ...

javascriptjquerycsstransition

AngularJS Implementation for a Dynamic User Interface

After working with MS MVC and KendoUI controls for my web apps, I am now transitioning to a project that will utilize MS WebApi 2.0 for a restful pattern and a Responsive UI consisting of HTML5, Bootstrap, and AngularJS. While I have experience in writing ...

javascriptangularjstwitter-bootstrapresponsive-designcontrols

The React-Native app freezes on the splash screen when running on iOS, while it functions perfectly on Android

My React-Native 0.62.3 app is not working on iOS. It launches, receives the bundle from metro, and then just displays the splash screen without any further action. Here's the run log: flipper: FlipperClient::addPlugin Inspector flipper: FlipperClient: ...

javascriptiosxcodereact-native

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

Rotate images with animation using Javascript

Seeking assistance with a swinging motion using two simple functions in Javascript. As a newcomer to the language, I am looking for guidance to achieve my goal. First function: function up() { imgObj.style.left = parseInt(imgObj.style.transform = 'r ...

javascript