Can you provide tips on how to center the title on the page?

Currently, I am working on codepen.io and have been tasked with creating a paragraph that includes a title. However, my dilemma lies in the fact that I need this title to be center-aligned without directly altering the "x" value. Unfortunately, CSS is not an option for me, so I am looking towards javascript for a solution.

In order to achieve this, I am utilizing a particular function to draw the title onto the graph. Below is the snippet of code I am using:

var text = document.createElementNS(svgNS,"text");
    text.setAttributeNS(null, 'x', 100);
    text.setAttributeNS(null, 'y', 15);
    text.textContent = (titel); 
document.getElementById("bargraph").appendChild(text);

If you are interested in viewing the full code or project, please click on the following link: codepen.io/Cleanwater/pen/LWQyJm?editors=0010

javascript

Answer №1

let newText = document.createElementNS(svgNS,"text");
    newText.setAttributeNS(null, 'y', 15);
    newText.textContent = (title); 
document.getElementById("chart").appendChild(newText);
    newText.setAttributeNS(null, 'x', 300 / 2 - newText.getBBox().width /2);

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

Tips for querying orchestrate.io

Recently, I found myself in need of a user-friendly database for a small highscore system in my game development projects using JavaScript. Through the Github student developer pack, I came across Orchestrate.io. After discovering a suitable driver module ...

javascriptnode.jsexpress

"Navigate back to a previous page in Vue Router without having to

I am currently exploring the option of creating a back button in my Vue.js application using vue-router that mimics the behavior of the browser's native back button. The challenge I'm facing is that when using history mode for the router and tryi ...

javascriptvue.js

The preventDefault method is failing to prevent the default action when placed within a

I am having trouble using preventdefault to stop an action. I'm sorry if the solution is obvious, but I can't seem to locate the mistake. Why isn't it preventing the link from being followed? Here is a link to my jsfiddle: http://jsfiddle.ne ...

javascriptjquery

Obtaining JavaScript data using Python Selenium Web Driver

I have been attempting to execute a javascript file within a Python script using Selenium WebDriver in order to retrieve the return value from the function. Despite my efforts and research, I have not been successful after spending several hours on this ta ...

javascriptpythonselenium

Inquiring about the intricacies of using Regular Expressions in

Can anyone provide a regex that only allows the characters 0-9, a-z, A-Z, hyphen, question mark, and "/" slash, with a character length between 5 to 15? I attempted the following approach, but it did not yield the desired result: var reg3 = /^([a-zA-Z0-9? ...

javascriptregex

The $.inArray() function returns a value of false or -1, despite the fact that the variable

My goal is to verify that my currentMedia variable (which exists in the DOM) can be located within my array media, and then return the index i, which should be 0 instead of -1. When I execute console.log(media[0]); and console.log(currentMedia);, the outc ...

javascriptjqueryarrays

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

Hey, let's say I have a main.js file with the following code: $("#mirador").load("mirador.html"); This code loads the HTML content from mirador.html into index.html <div id="mirador"></div> I'm wondering if there is a way to chan ...

javascriptjqueryhtml

Issues encountered with AngularJs filter search functionality

Why am I having trouble adapting this search filter from here? This is what my code looks like: controllers.js angular.module('starter.controllers', ['starter.services']) .controller('AppCtrl', function($scope, $ionicModal ...

javascripthtmlangularjs

My code to hide the popup when clicking outside doesn't seem to be working. Can you help me figure out why?

After searching around on stackoverflow, I stumbled upon a solution that worked for me: jQuery(document).mouseup(function (e){ var container = jQuery(".quick-info"); if (container.has(e.target).length === 0) { container.hide(); } }); ...

javascriptjqueryjquery-selectors

Combine, condense, and distribute JavaScript files using Express without applying gzip compression to the response

Currently, I am developing a web application using Express. My goal is to merge, minify, and serve .js files efficiently. To achieve this, I have created a middleware with the following code: var fs = require('fs'), path = require('path ...

javascriptnode.jsexpressgzipmiddleware

Ways to ensure that ng-click is triggered exclusively on the click event

I am a beginner in Angular and attempting to toggle a class on click only for the current link. However, when I click, it is affecting all links instead of just the current one. I would like it to work only on the current element, similar to how we use "(t ...

javascriptjqueryangularjs

Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

I am currently working on integrating the API breakpoints in my child component. These components are designed for my football web application. The breakpoints are sourced from: api-football My challenge lies in passing multiple prop values into a c ...

javascriptvue.jsvue-componentvuejs3

Basic math tool using JSP/Servlet combination and Ajax

I have a follow-up question to my previous inquiry on Stack Overflow. I believe this topic deserves its own discussion due to the thorough response I received. My goal is to develop a straightforward calculator using JSP. The calculator will include two t ...

javajavascriptajaxjspservlets

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

Issues encountered when trying to execute npm start: "The function this.htmlWebpackPlugin.getHooks is not recognized."

My background in web development is weak, and I'm facing a challenging situation. I had to take over the work of a colleague who left, and now I'm trying to finish the site we were working on. Since then, I've been learning about web develop ...

javascriptnode.jsreactjsnpmwebpack

Encountered an issue while attempting to connect MongoDB to Node.js

``const timeoutError = new error_1.MongoServerSelectionError(Server selection timed out after ${serverSelectionTimeoutMS} ms, this.description); .MongoServerSelectionError: connect ECONNREFUSED ::1:27017 const {MongoClient}=require('mongodb'); c ...

javascriptnode.jsmongodbexpress

Exploring the Document Object Model to locate the adjacent sibling of a parent element

If I need to implement an event that hides the section .dependent-box whenever the element with class .radio-click-hide is clicked, what would be the best approach for traversing the elements to achieve this functionality? I have attempted the following co ...

javascriptjqueryrazor

`Vue.js child component not reflecting updated prop value`

Created a functionality within the App.vue parent component to communicate with all child components, instructing them to close any open modals. Additionally, implemented a feature for a child component to notify the parent to hide the overlay when the mai ...

javascriptvue.jsfrontendvue-componentvue-router

What is the best way to preserve an apostrophe within a variable in JavaScript without it being replaced?

How can I send the value of NewText in its original form from .cs code using an ajax call? **var NewText ="D'souza";** $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: " ...

javascript

What could be causing the post method to fail in this AngularJS example?

After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller