CODEWITHSUNDEEP
jqueryhtmlcsshighcharts
Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Can't set subtitle width in Highcharts

I am trying to accomplished a hover effect in which I show subtitle which I have achieved using:

chart_completion.setTitle(null, {
                                text: '130 hrs act',
                                style: {
                                    color: '#8b8b8b',
                                    fontSize: '10px',
                                    width:'20px'
                                },
                                y: 50
                            });

However, the resultant width of subtitle is too narrow and in it's generated HTML, I have inspected that it is spliting/converting the text

130 hrs act

into following HTML:

<text x="40" text-anchor="middle" class="highcharts-subtitle" zIndex="4" style="color:#8b8b8b;font-size:10px;width:16px;fill:#8b8b8b;" y="60">
    <tspan>130</tspan>
    <tspan dy="13" x="40">hrs</tspan>
    <tspan dy="13" x="40">act</tspan>
    <title>130 hrs act</title>
</text>

JSFiddle: http://jsfiddle.net/amigoo/zwod86e1/8/

Any solutions I could give it a width so that the width get fits in one line inside the circle?

Upvotes: 0

Views: 326

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

Your container is so small,enlarge it, I managed to make it in one line using use :

   textOverflow : "none",
   whiteSpace: 'nowrap'

Fiddle Here

Upvotes: 1

Related Questions