Tips for incorporating an icon beneath the title of an angular echart

How can I add an icon below the Echart title? I have attempted the following but have been unsuccessful in rendering the icon.

https://i.sstatic.net/PUURP.png

The code in my component.ts file is as follows:

 constructor(private sanitizer: DomSanitizer) {}
  
 ngOnInit(){
 this.iconHtml = this.sanitizer.bypassSecurityTrustHtml('<i class="fa fa-chart-bar"></i>');
  this.costByTypeChart();
   }

costByTypeChart(){
   this.typeoptions = {
      title: {
        text: `<div [innerHTML]="iconHtml"></div>`,
        subtext: "Data not loaded yet",
        left: "center",
        top: "center",
        subtextStyle: {
          fontSize: 20,

        }
      },
      yAxis: [],
      series: []
    }
};
}

In the component.html file:

<p-card header="Cost By Type">
<div echarts [options]="typeoptions" [ngStyle]="{width: '100%',height:'100%'}"></div>
</p-card>

This is the output I am currently receiving:

https://i.sstatic.net/HODEB.png

javascriptangulartypescriptecharts

Answer №1

It seems that utilizing innerHTML with an external library may pose a challenge, as the binding needs to be done in the child component.

Instead, consider using a graphic component for this scenario.

  costByTypeChart() {
    this.typeoptions = {
      title: {
        // This won't work..
        // text: `<div [innerHTML]="iconHtml"></div>`,
        subtext: 'Data not loaded yet',
        left: 'center',
        top: 'center',
        subtextStyle: {
          fontSize: 20,
        },
      },
      graphic: {
        type: 'image',
        // but you can add an image like this
        style: {
          image: 'assets/chart-bar-solid.svg',

          x: 250,
          y: 160,
          width: 30,
        },
      },
    };

Ensure to include assets/chart-bar-solid.svg in the assets folder and adjust the icon's position accordingly.

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

How to have multiple versions of grunt coexisting on a single machine

I am involved in two different projects that have unique requirements for Grunt versions: Project A specifically needs Grunt v0.3.2 Project B requires Grunt v0.4.1 Both of these projects are managed in separate workspaces. Currently, I have Grunt v0.4. ...

javascriptbuildnpmgruntjs

I encountered a 404 error when attempting to execute the "npm publish" command

While attempting to publish a package to the npm registry, an error is encountered after running the command npm publish. npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated. npm WARN prepublish-on-install Use `prepare` for buil ...

javascriptnode.jsnpmnpm-publish

changing the contents of an array within the current state

My current task involves updating a list of names in the state before sending it as props to another component. // code snippet omitted for brevity this.state = { // other states here playerName: { player1Name: 'Default Player 1 Name ...

javascriptreactjs

What is the best way to use JavaScript to replicate the bootstrap WCAG algorithm for selecting dynamic color schemes?

After transitioning to Bootstrap 5, I observed a unique feature where an algorithm determines the text color for buttons when they are hovered or active. For instance: For a primary color of black, hovering over the button changes the background to black ...

javascriptsassbootstrap-5wcag

Endless cycle of React hooks

I am struggling to understand why I keep encountering an infinite loop in my useClick function. I can see that I am updating the state value inside the useEffect using setVal, but according to the second parameter, useEffect should only run on onClick as ...

javascriptreactjsreact-hooks

Struggling to use the innerHTML method to update a div within another div element?

<!DOCTYPE html> <html> <head> <title>Business Information Card</title> <script type="text/javascript"> window.onload = init; function init(){ var button = document.getElementById("populate ...

javascripthtmldominnerhtml

Convert millimeters to inches with a unique AngularJS filter that activates on click

I am currently working on a UI that requires users to enter dimensions for width and height. Within the UI, there are 2 buttons available - one for 'mm' and the other for 'inches'. When either of these buttons is pressed, the active cl ...

javascriptangularjsconvertersangular-filters

Having trouble deploying my MEAN stack application on Heroku due to a MongoNetworkError: unable to establish a connection to the

Encountering difficulty connecting to MongoDB for application deployment, receiving error message "MongoNetworkError: failed to connect to server [localhost:27017] on first connect [Error: connect ECONNREFUSED 127.0.0.1:27017". What are potential issues ca ...

angularmongodbherokumean

What is the best way to access the form button inside a div element?

Here is the code snippet for my form: <form accept-charset="utf-8" action="https:example.com" method="get" name="test"> <div class="classy"><input type="button" class="buttonE ...

javascriptphphtmljquerycss

Alternative names for Firefox's "error console" in different browsers

Are there similar tools to Firefox's "Error console" available in other web browsers? I rely on the error console for identifying JavaScript errors, but I haven't found a straightforward way to view error messages in other browsers like Internet ...

javascriptbrowser

A guide on integrating ngrx-store with a canLoad guard for optimal functionality

Is this a recommended practice? Below is what I am attempting to do: I have two lazy loaded modules: ManagementModule and ConfigurationModule, with the following route configuration: const routes: Routes = [ {path: '', redirectTo: 'manag ...

angularngrxngrx-effectsngrx-store-4.0

The Angular module does not have any exported member named 'ButtonFillMode'

Encountering an error message stating '"@progress/kendo-angular-buttons"' has no exported member 'ButtonFillMode'. when utilizing the Kendo Editor toolbar module. Despite having installed all necessary dependencies for the Edi ...

angularkendo-uikendo-editor

What is the best way to transfer data between different states in ReactJS components?

I am in the process of developing an application that will showcase a list of categories. Upon selecting a category, the application will transition to the next page where a query regarding water type will be posed. Once the water type is chosen, the app s ...

javascriptreactjs

Encountering a "self is not defined" error while utilizing the Jodti-React text editor within a Next.js project

Issue with 'self is not defined' error while using jodti-react in a Next.js project import React, { useState, useRef, useMemo } from "react"; import Dashborad from "./Dashborad"; import JoditEditor from "jodit-react" ...

javascriptnode.jsreactjsangularjsnext.js

Transforming hierarchical data into a flat table view using AngularJS by iterating through the structure

I'm grappling with creating valid tabular markup using AngularJS and struggling to find a solution. While I've come across similar inquiries, none seem to cater specifically to my requirements. My race result data is organized in the following s ...

javascriptangularjsiterationhtml-table

Aurelia: Understanding the Integration of a View/ViewModel from an npm Package

We've decided to implement Aurelia for the frontend of our application. With multiple projects in the pipeline, we are looking to streamline the process by packaging our custom code into npm packages that can be easily integrated by developers. This w ...

javascriptnpmaureliacode-separation

Unable to transition to a different module by leaping

I recently started using Angular 2 and followed all the instructions, but I'm having trouble loading a component from an external module. Plnkr - Take a look at this code. It's very simple with just 3 links and a few empty components (the app co ...

angularrouter

Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

How can I adjust the color of the entire table (every row of the table)? Currently, I can only change the color of the first row of my table. Here is my color function in JSP: function changeColor(rowID){ var row = document.getElementById(rowID); ...

javajavascriptajaxjsp

React window resizing actionsWould you like some more information on this

I am attempting to create a resize function that will retrieve the window width and dynamically display it using react. Here is my current code: class Welcome extends React.Component { constructor() { super(); this.state = { ...

javascriptreactjs

Crafting redirect rules in React that avoid redirecting to the same route

In my project, there is a file named AuthenticatedRoute.tsx, which serves as a template for all the protected/authenticated routes in my Router.tsx file. export default ({ component: C, authUser: A, path: P, exact: E }: { component, authUser, path, ex ...

javascriptreactjstypescriptreact-router