Apex chart - line break for labels

Question

I get the following results in javascript

return label + sy + ' - ' + ey

but I'd like to show the results as

return label NEWLINE sy + ' - ' + ey

I want to display the data in browser in two rows the label is a name and the values of sy and ey are dates

<script type="text/babel">
                              class ApexChart extends React.Component {
                                constructor(props) {
                                  super(props);

                                  this.state = {
                                  
                                    series: [
                                      {
                                        data: [
                                        
                                          
                                                            
                                        
                                            {
                                                x: 'Test 1',
                                                y: [
                                                  new Date('2019-05-15').getTime(),
                                                  new Date('2022-05-15').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 2',
                                                y: [
                                                  new Date('2020-09-23').getTime(),
                                                  new Date('2024-09-23').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 3',
                                                y: [
                                                  new Date('2018-02-10').getTime(),
                                                  new Date('2023-02-10').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 4',
                                                y: [
                                                  new Date('2020-02-10').getTime(),
                                                  new Date('2024-02-10').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            },                      
                                        
                                            {
                                                x: 'Test 5',
                                                y: [
                                                  new Date('2020-01-01').getTime(),
                                                  new Date('2024-01-01').getTime()
                                                ],
                                                fillColor: '#2986cc'
                                            }                   
                                                                                  
                                        ]
                                      }
                                    ],
                                    options: {
                                      chart: {
                                        height: 3060,
                                        type: 'rangeBar'
                                      },
                                      plotOptions: {
                                        bar: {
                                          horizontal: true,
                                          distributed: true,
                                          rangeBarOverlap: false,
                                          dataLabels: {
                                            hideOverflowingLabels: false
                                          }
                                        }
                                      },
                                      dataLabels: {
                                        enabled: true,
                                        formatter: function(val, opts) {
                                          var label = opts.w.globals.labels[opts.dataPointIndex]
                                          var a = moment(val[0])
                                          var b = moment(val[1])
                                          
                                          var sy = a.format('L')
                                          var ey = b.format('L')
                                          return label +  sy + ' - ' + ey
                                        },
                                        style: {
                                          colors: ['#f3f4f5', '#fff']
                                        }
                                      },
                                      xaxis: {
                                        type: 'datetime'
                                      },
                                      yaxis: {
                                        show: false
                                      },
                                      grid: {
                                        row: {
                                          colors: ['#f3f4f5', '#fff'],
                                          opacity: 1
                                        }
                                      }
                                    },
                                  
                                  
                                  };
                                }

                                render() {
                                  return (
                                    <div>
                                      <div id="chart">
                                        <ReactApexChart options={this.state.options} series={this.state.series} type="rangeBar" height={3060} />
                                      </div>
                                      <div id="html-dist"></div>
                                    </div>
                                  );
                                }
                              }

                              const domContainer = document.querySelector('#app');
                              ReactDOM.render(React.createElement(ApexChart), domContainer);
                            </script>

Answer 1

try with array put new line elements as an array [label,sy,'abc']

Answer 2

For browser newline is <br/> for the rest it is mostly \n, use accordingly

return label + "<br/>" + sy + ' - ' + ey

or

return label + "\n" + sy + ' - ' + ey

Update:

It seems you are using apex chart with react which doesn't seem to support html tags for label.

From the documentation here

https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/

And a related issue here

https://github.com/apexcharts/apexcharts.js/issues/640#issuecomment-578017547

Try returning the array and see if it works

Try it like this

return [label, sy + ' - ' + ey]

Answer 3

What you could do is put them into seperate <p> elements.

For example, you could have something like this:

//make the output as text
var output = "<p>" + label + "</p><p>" + sy + " - " + ey + "</p>";

//create and add the element to the HTML
var outputElement = document.createElement("div");
outputElement.innerHTML = output;
document.body.appendChild(outputElement);

So the result would be:

<p>[label]</p>
<p>[sy] - [ey]</p>

In HTML, different <p> elements are put on different lines.