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

What is the method for accessing extra parameters in the signIn() callback function in [...nextauth]?

As per the Next Auth documentation, it is possible to pass extra parameters to the /authorize endpoint using the third argument of signIn(). The examples provided are: signIn("identity-server4", null, { prompt: "login" }) // always ask ...

javascriptreactjsnext.jsjwtnext-auth

Enhancing Angular with Plotly: Implementing click events on bar chart legends

I'm currently working on implementing color pickers for my plotly-plot charts within an Angular template. I am looking to add a function that triggers when the chart legend is clicked. How can I achieve this and get a click event for the chart legends ...

javascriptangulareventschartsplotly

The identifier '_toConsumableArray' has been declared beforehand

Whenever I try to start my Redux app, I encounter the following issue: ./node_modules/draftjs-md-converter/dist/index.js Syntax error: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/draftjs-md-converter/dist/index.js: Identifier '_toConsumableA ...

javascriptnpmreduxbabeljs

Refreshing a div by replacing its content with text entered into an input field

I'm exploring React and attempting to create a basic div that dynamically changes its text based on input from an input box. Below is the code I have written so far: import React from "react"; import ReactDOM from "react-dom"; const rootElement = d ...

javascriptreactjsbabeljs

How can I utilize JavaScript to retrieve the background color of a table cell upon clicking?

I am trying to create a function where an alert pops up displaying the background color of a table cell whenever it is clicked. Unfortunately, I am having trouble accessing and retrieving the background color value. The table cell in question is defined a ...

javascripthtmlbackground-color

Unable to trigger jQuery onclick event on nested div elements

I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...

javascriptjqueryhtmlcss

What's the proper way to mention HTML React component classes without triggering their execution?

When working with HTML React components like div, a, p, li, we typically write them in JSX syntax: <div>Hello</div> However, how can we reference one of these components without actually "using" them? For custom components, we can import, ref ...

javascriptreactjs

Unable to open Google Maps link within React application

I've set up a conditional link based on location, using the following code: <a href={`https://maps.google.com/maps?q=${delivery_branch.latitude},${delivery_branch.longitude}`} target={"_blank"} >{`${delivery_branch.street}, ${d ...

javascripthtmlreactjs

What is the best way to organize products based on the proximity of users using MongoDB's Geospatial Queries

I'm currently working on a web application that connects users with neighbors to buy and sell products. The app is built using node.js, JavaScript, mongodb, and mongoose. My main issue lies in sorting the products. I want to display products from nea ...

javascriptnode.jsmongodbmongooseproduct

Bring in d3 along with d3-force-attract

Recently, I have installed D3 along with d3-force-attract. npm install @types/d3 -S npm install -S d3-force-attract I am currently facing an issue with importing d3 force attract as it is not recognized as a typescript module, unlike d3 itself. The inco ...

javascripttypescriptd3.js

Using AJAX to invoke a REST service endpoint

I'm currently implementing a REST service call using AJAX. $(document).ready(function () { var xmml = getXmlLoginRequest(); var wsdlURL = getWSDL('search'); $.ajax({ type: "POST", url: wsdlURL ...

javascriptphpajaxrest

Error occurs despite successful 200 response from Ajax delete request

I've been working on setting up a simple API for my project and encountered an issue. When I send a DELETE request using jQuery Ajax, the request goes through successfully, deletes the specified entry in the database, returns a status of 200, but trig ...

javascriptphpjqueryajaxhttp-delete

Transforming JSON arrays into object representations

I have a collection of components structured like this: var names = 1)"lat: 40.6447077, lng: -73.878421, address: 1600 Pennsylvania Avenue, Brooklyn, NY 11239, USA" 2)"lat: 40.609099, lng: -73.931516, address: 2015 E. 35th street, Brooklyn, Ny, Un ...

javascriptjqueryjson

Sequential cascade filtering without a preset default option

Please note: The following code snippet has been adjusted and is now functional. In a MySQL database table, I have the following columns with corresponding values: Category (Fruit, Vegetable) Type (Apple, Orange, Pumpkin, Potato) Subtype (Red Delicious, ...

javascriptjqueryhtmlmysqldrop-down-menu

Is it possible to transform a webpack configuration into a Next.js configuration?

i have come across a webpack configuration setup from https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md: const sane = require('sane'); const { WebpackPluginServe: Serve } = require('webpack-plugin ...

javascriptnode.jswebpacknext.jswebpack-config

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...

javascriptpythonhtmljquerydjango

Ways to extract a single digit from the total sum of a date in the format of 15-06-2015

Is there a way to extract a single digit from the sum of a number in date format, such as 15-06-2015? My goal is to convert the date format 15-06-2015 into a single-digit value by adding up the numbers. For instance: In the case of 15-05-2015, the output ...

javascriptnode.js

What are the steps to installing and utilizing the Chart.js package on your local machine?

I thought installing chart.js on my Raspberry Pi would be a simple task, but I seem to be struggling with it. Due to the nature of my project, I need to have it installed locally rather than relying on an online version. Following the usual steps, I navig ...

javascripthtmlbashnpmchart.js

What is the best way to include the parameter set in the interceptor when making a post request?

-> Initially, I attempt to handle this scenario in the axios request interceptor; if the parameter is uber, then utilize a token. If the parameter is not uber, then do not use a token. -> Afterward, how can I specify uber as a parameter in the custo ...

javascriptnode.jstypescriptrestaxios

Accordion elements that are active will move all other content on the page

I am currently working on creating an accordion using the following code: https://codepen.io/rafaelmollad/pen/JjRZbeW. However, I have encountered a problem where when clicking on one of the accordion items, the content expands and pushes the title upward. ...

javascripthtmlcssaccordion