Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example

One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size of the div container and font size didn't provide a fixed solution as the labels are user-specific. It would be ideal to have the text wrapped instead. How can this issue be addressed? Morris.js utilizes the following code snippet to create the text svg element.

 this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);
cssgraphsvgchartsmorris.js

Answer №1

Raphael seems to have a clever way of supporting multiline strings by incorporating "\n" in the text. This could be an easy fix for you, simply replacing " " with "\n" in your labels.

Alternatively, a more complex solution would involve substituting the "text" element in the SVG created by Raphael with a foreign element that permits word wrapping:

<foreignObject x="20" y="10" width="150" height="200">
   <p xmlns="http://www.w3.org/1999/xhtml">Implementing wrapping text using foreignObject within SVG!</p>
</foreignObject>

For fallback options:

<switch>
  <foreignObject x="160" y="10" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Utilizing foreignObject for wrapping text within SVG!</p></foreignObject>
  <text x="20" y="20">Your SVG viewer is unable to display html content.</text>
</switch>

I'm uncertain about the most effective way to perform this substitution of "text" with a foreign object: either post Morris rendering or through modifying Morris/Raphael directly.

Answer №2

In my opinion, the problem definition requires further clarification.

Upon testing the code you provided on my end, it seems to be working correctly. I also replicated the code in JSFIDDLE, where it also functioned properly.

It appears that the issue with label sizing is automatically resolved. After examining the default size settings in the CSS, labels rendered differently based on width specifications. Labels exceeding a certain width were not displayed, so there may be no need to manually set styles or override them.

From my observation, it seems like these functionalities are inherent within the library. Therefore, it might require either extensive customization or switching to a different library altogether.

Please let me know your preferred course of action so I can assist you accordingly :)

Edit: Alternatively, you can adjust the property of GridTextSize which defaults to 16.

In this updated Fiddle2, I changed 'gridTextSize' to 8, displaying all text at size 8.

It may not be perfect, but it should suffice :)

Answer №3

Get the full version of morris.js from here. Inside the zip file, you will find a file named morris.js. Open it in an editor and modify the default label angle parameter (line 133):

133 |     xLabelAngle: 90,//original value 0

If you need to minimize it, you can use any online JavaScript compression tool.

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

Enhancing speed on an extensive list without a set height/eliminating the need for virtualization

My webapp includes a feature that showcases exhibitors at an expo. The user can click on "Exhibitors" in the navigation bar to access a page displaying all the exhibitors. Each exhibitor may have different details, some of which may or may not contain data ...

javascriptjqueryhtmlcss

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

I need assistance with adding an "if condition" to my text field. The condition should prevent the empty bubble from appearing when the send button is clicked. function verifyInput(){ var currentText = document.getElementById("demo").innerHTML; var x ...

javascripthtmlcss

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

Arranging divs precisely while rotating a Bootstrap Thumbnail

I've been experimenting with creating a "css3 on hover flip" effect for bootstrap thumbnails. It works perfectly fine on simple divs (check it out here) Here's the main CSS3 code I'm using: .front{ position:absolute; transform:pers ...

htmlcsstwitter-bootstrap

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

cssreactjs

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

Minimizing Unused Space After Media Query Adjustment

Using the bootstrap grid system, I am facing some uncertainties. I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above. In my current setu ...

csstwitter-bootstrapmedia-queries

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

Having trouble aligning material-ui GridList in the center

I am currently working with a GridList in order to display Cards. The styling for these components is set up as shown below: card.js const useStyles = makeStyles({ card: { maxWidth: 240, margin: 10 }, media: { heigh ...

javascriptcssreactjsmaterial-ui

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Perform a jQuery computation using a CSS style

Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...

jquerycss

Discovering the most recently selected element in jQuery

Currently reading a jQuery tutorial from the Head First series and practicing with an example where I need to identify the last selected element. In Chapter 2, there is a task involving four images on a page. When a user clicks on any of these images, the ...

javascriptjquerycss

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

csstextformatting

Plotting the normal distribution of a multidimensional array in Python: a guide

One of my challenges is figuring out how to plot the standard deviation curve for each average in the tempavg1 array. In this case, I have a 3-dimensional array named temprSubset from which I calculated the average across 2 dimensions. Here is the code sn ...

pythonarraysgraphstatistics

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Arrange one div on top of another div using Bootstrap

Could someone please show me how to position a div above another div? Here is the desired layout: https://i.sstatic.net/mpeue.png <div class="col-md-12 container"> <div class="col-md-12"> box1 </div> <div class="col-md-12" ...

htmlcssbootstrap-4

CSS Color-Range Conditional Styling

I am interested in creating a simple chart using divs and spans, with the goal of implementing conditional formatting on each column based on its value to determine height. I have been struggling with figuring out how to make it work similar to Excel' ...

htmlcssconditional-formatting

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

phpcssfunctionexternal

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular