Discover the magic of Google Charts with the ability to showcase HTML source code within tooltips

I am attempting to show a Pie Chart using Google Charts with HTML in the tooltips, but I am encountering an issue where the HTML source is visible. I have tried setting html:true on the data column and tooltip.isHtml in the options, but I am unsure of what else to try next! Below is my JavaScript code:

google.setOnLoadCallback( drawChart_1 );
function drawChart_1() {
  var data = google.visualization.arrayToDataTable( [
['','',''],
['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ],
['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ],
['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ],
['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ],
]);
data.setColumnProperty(2,'role','tooltip');
data.setColumnProperty(2,'html','true');
data.setColumnProperty(2,'p',{'html':true});  

  var options = {"height":300,"pieSliceText":"none","tooltip.isHtml":true,"pieHole":0.5,"legend":"none","pieSliceTextStyle":"none","chartArea":{"width":"100%","height":"80%"},"slices":[{"color":"#959595"},{"color":"#616161"},{"color":"#005131"},{"color":"#e2e2e2"}]};
  var chart = new google.visualization.PieChart( document.getElementById( 'piechart_div_1' ) );
  chart.draw( data , options );
}

If anyone has insight into what might be causing this issue, please let me know. I have already set tooltip.isHtml to true as suggested by some sources, but it hasn't resolved the problem. Additionally, I have attempted setting html:true on the data column with no success.

javascriptgoogle-visualization

Answer №1

There are a couple of things to note here:

Firstly, make sure to provide the column definition within the array like so: 

var data = google.visualization.arrayToDataTable([
  ['' , '' , {type:"string" , role:"tooltip" , p:{"html":true}}],
  ...
]);

Also, ensure that you include p:{"html":true} in your code.

Next, within the options, the tooltip should be an object with keys: 

  "tooltip": {
    "isHtml":true
  },

Instead of using "tooltip.isHtml":true.

You can see the following working snippet below: 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['','',{type:"string",role:"tooltip",p:{"html":true}}],
      ['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ],
      ['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ],
      ['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ],
      ['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ],
    ]);

    var options = {
      "height":300,
      "pieSliceText":"none",
      "tooltip": {
        "isHtml":true
      },
      "pieHole":0.5,
      "legend":"none",
      "pieSliceTextStyle":"none",
      "chartArea":{
        "width":"100%",
        "height":"80%"
      },
      "slices":[
        {"color":"#959595"},
        {"color":"#616161"},
        {"color":"#005131"},
        {"color":"#e2e2e2"}
      ]
    };
    var chart = new google.visualization.PieChart( document.getElementById( 'piechart_div_1' ) );
    chart.draw( data , options );
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_div_1"></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

Issues with user-generated input not properly functioning within a react form hook

After following the example provided here, I created a custom input component: Input.tsx import React from "react"; export default function Input({label, name, onChange, onBlur, ref}:any) { return ( <> <label htmlF ...

javascriptreactjstypescriptnext.jsreact-hook-form

Creating an HTML table from an array in an email using PHP

How can I use data collected by Javascript to generate an email in PHP? The array structure in JavaScript is like this: Menu[ item(name,price,multiplier[],ingred), item(name,price,multiplier[],ingred) ] The array Menu[] is dynamically cr ...

javascriptphparraysajax

Make sure to leave a space after a period in a sentence, but do

My question is about fixing spacing issues in text, specifically sentences that lack spaces after a dot. For example: See also vadding.Constructions on this term abound. I also have URLs within the text, such as: See also vadding.Constructions on th ...

javascriptregexurl

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to share data from one controller in a JS file to another JS file? (using AngularJS)

I need to create a table in JavaScript. In one of my JS files, I have a controller with JSON data containing properties like width, height, color, etc. In another JS file, I am building the actual table structure. Here is an example of my AngularJS file: ...

javascriptjqueryjsonangularjs

Is there a feature in impress.js that allows for navigating to the following slide easily?

Impress.js is an innovative web presentation tool created with Javascript. I am interested in setting up custom events to navigate through the slides. This could involve adding buttons for "Next" and "Previous", for example. The impress.js file itself fun ...

javascript

Having trouble with the parent folder functionality in JavaScript?

I am facing a challenge with my website's structure as I have an old setup that needs to be updated. http://localhost/enc/pdfs/ : This directory contains some html files that are uploaded via ajax to be displayed on a tabbed div using: var Tabs ...

javascriptjqueryajax

Start a Draft.js Editor that includes an unordered list feature

I am trying to pre-populate a draft.js editor with an unordered list made from an array of strings. Here is the code I have so far: const content = ContentState.createFromText(input.join('*'), '*') const editorState = EditorState.crea ...

javascriptreactjsdraftjs

Utilizing Ajax looping to generate dynamic HTML content with Bootstrap tabs

I am looking for a way to fetch multiple JSON files and display the data from each file in separate Bootstrap 3 Tabs. I understand that the getJSON function does not wait for completion before moving on, but I need help with using callbacks in situations ...

javascriptajaxtwitter-bootstrapcallbacktwitter-bootstrap-3

Having trouble importing from the public folder in CSS with Create React App?

While working on a project initialized with Create React App, in the public folder there is an assets directory containing a file named logo512.jpg. When I use this file in a component like so: <div> <img src='/assets/logo512.jpg'/& ...

javascriptcssreactjscreate-react-app

JavaScript: Efficiently Replacing Multiple Text Instances

To ensure that users do not input multiple empty paragraphs in the text editor, I have found a method to eliminate a single <p><br></p> from the text within the editor message. var str = content.replace('<p><br></p> ...

javascript

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

phpjavascriptjqueryhtmlcombobox

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

What is the best way to paginate aggregated results in Mongoose?

In my project, I have a User model that is linked to two other associated models - Profile and WorkProfile. The Profile model contains basic information about the user like name, email, and home address, while the WorkProfile model stores details such as o ...

javascriptnode.jsmongoosepagination

Dynamic Select Box with Display of 2 Buttons

Looking to create an Ajax combo box with options for Female and Male. I would like to display a button for Female and a button for Male. Here is the code that I have: <!DOCTYPE html> <html> <head> <style> #for-male, #for-female{ ...

javascriptjqueryajaxcombobox

"Mastering the art of traversing through request.body and making necessary updates on an object

As I was reviewing a MERN tutorial, specifically focusing on the "update" route, I came across some interesting code snippets. todoRoutes.route('/update/:id').post(function(req, res) { Todo.findById(req.params.id, function(err, todo) { ...

javascriptloopsexpressmongoose

Is it possible to launch a React application with a specific Redux state preloaded?

Is there a way to skip navigating through a bulky frontend application in order to reach the specific component I want to modify? I'm curious if it's feasible to save the redux store and refresh my application after every code alteration using t ...

javascriptreactjsreduxreact-redux

Universal customization for Material-UI Select

I am attempting to customize the appearance of a select component within a React project using MUI 5. Specifically, I want to modify the border size and color when the select component is in focus. While other components can be styled globally using styleO ...

javascriptreactjsmaterial-ui

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

What prevents me from calling a function while it is being defined in the prototype?

I am experimenting with inheritance through an example. I want to access all properties of objects abc and pqr, so I decided to use Object.create. However, when I try to get the value of r by calling the getr() function, it doesn't seem to work as exp ...

javascriptjqueryinheritance