Line break in C3 generated SVG chart via JavaScript

Question

I need a help on generating line break in html.

Javascript

var x = "jun";
var y = "2015";

var calculate= x + "<br>" + y;

Html returns like below

<div>jan <br> 2015</div>

expected result: i need a line break in html but should not render <br> tag.

Update: what i want is "jan" in first line and next line "2015"

I am using these values in c3 chart x values.

JSFIDDLE

Thanks in Advance.

Splanchnic

Use \n instead of <br/> – Menell

That doesn't work. You can try it in the jsFiddle he provided. – Hyson

@zer00ne, i tried but it is not giving line breaks in date. what i want is "jan" in next line "2015" – Splanchnic

They are using textContent instead of innerHTML and even if there are dupes, the solutions don't seem to work anymore. So I'd say you're stuck. – Pavilion

if you are decided to use textContent, you can use " " something like that: jsfiddle.net/k9Dbf/604 – Idealistic

@a.u.b, no html tags are rendering. and this app is responsive so i can not use space. – Splanchnic

@Kaiido, any cross browser suggestion. – Splanchnic

I'm working on it but I guess the best solution would be to render an other <tspan> just below, by hand... – Pavilion

#16702022 This answer suggests that the only way would be to create separate tspan, so you probably have to amend c3 source. – Litta

Here is a tweak, you may not like it : jsfiddle.net/k9Dbf/607 but it works – Pavilion

@Pavilion this sounds like a good answer – Palembang

Answer 1

Your question statement was a bit unprecise : You are using C3.js which will produce svg element.

So the markup returned was actually <tspan dx="0" dy=".71em" x="0">0&lt;br&gt;2014</tspan>.

C3 will use the textContent property of the tspan to append the text content returned by your function.
As already said in other questions, you can't add a line break into <tspan> elements.

So the solution is effectively to create a new tspan just under the other one, in the same <text> element.

Unfortunately, there is no way to get these precise elements except by looping through all others tspans, so this may sounds like a real hack but here is a script that will do what you want...

// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.getMonth() + '\n' + x.getFullYear();
                      
                    }
                }
            }
        }
    }
});
// get our svg doc
var svg  = document.querySelector('svg');
// get our tspans element
var tspans = svg.querySelectorAll('tspan');
// transform it to an array so the clones don't add to the list
var ts = Array.prototype.slice.call(tspans);

for(var i = 0; i<ts.length; i++){
  // get the content
  var cont = ts[i].textContent.split('\n');
  // that wasn't the good one...
  if(cont.length<2) continue;
  // create a clone
  var clone = ts[i].cloneNode(1);
  // set the text to the new line 
  clone.textContent = cont[1];
  // space it a litlle bit more
  clone.setAttribute('dy', '0.9em')
  // set the good text to the upperline
  ts[i].textContent = cont[0];
  // append our clone
  ts[i].parentNode.insertBefore(clone, ts[i].nextSibling)
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet">
<div id="chart"></div>

Pavilion

Answer 2

You need to create new <tspan> for each new line. Reason is that <tspan> is usually found inside <text> element. Which has certain coordinates. You cannot go "against" those coordinates.

The only thing you can do is create another <tspan> with different set of coordinates and position it as you like.

Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, ... etc also apply.

The SVG Text Element renders the first character at the initial current text position.

This position is defined by the 'x' and 'y' attributes of the SVG Text Element.

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.

Applecart

Can you please help me in creating <tspan> for each new line. – Splanchnic

Answer 3

Perhaps that's what you need:

var calculate= '<pre>' + x + '\n' + y + '</pre>';

You have to put the whole thing in pre-tags that the \n is interpreted as a line break.

About: http://www.sitepoint.com/everything-need-know-html-pre-element/

Demo on CodePen: http://codepen.io/mizech/pen/gPOrEz

Tagmemic

it is not working for the chart, sorry. i have tried it. it is rendering as "<pre>APR2015</pre>" – Splanchnic

I think you need to create element – Martinelli

Answer 4

i have tried following code in abc.html and it's working.please try.

    <!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
var x = "jun";
var y = "2015";
document.getElementById("demo").innerHTML =x+"<br>"+y;
</script>
</body>
</html> 

Histochemistry

It's all about c3, plain js always works. Your answer is not valid in this context. – Reider