In HighChart, how can I make a green line appear between my title and my subtitle?
JSFiddle
title: {
useHTML: true,
text: 'Header Text in Line1 </br> Line 2 Text',
style: {
"text-align": "center"
}
},
subtitle: {
// useHTML: true,
text: 'SubTitle',
style: {
"color": "red",
}
}
What you'd need to do is modify the style attribute like this:
title: {
useHTML: true,
text: 'Header Text in Line1 </br> Line 2 Text',
style: {
"text-align": "center",
"border-bottom": "1px solid green"
}
},
Output
You can make the title display:block and then set the left to 0px. Then set the width to 100%. Now the title spans the whole width of the chart. Now apply a bottom border of green color. You will get the desired effect.
In the style property of the title, you could give
"width": '100%',
"display": 'block',
"left": 0
Have a look at this fiddle - https://jsfiddle.net/rwmntze8/
Hope this helps!
PS: Someone removed the original image containing the requirements, attached by the OP in the question, during the edits (You can find it in the edit revisions). I have attached it here for reference, in case someone thinks why the green line spans till the end.
Just need to add an empty css below, nothing more:
.highcharts-title {
border-bottom: 1px solid black;
}
Doing it by pure CSS (not by setting element style using JS) gives you the best performance.
Live example: http://jsfiddle.net/fqes890o/
Related
I wonder how to change the font color of drillUpButton text. I tried css to extract the element like: g.highcharts-button highcharts-drillup-button highcharts-button-normal text{color: blue;} However it doesn't work.
Button Picture
The drillUpButton API only provide how to change the theme of the button itself but has nothing to do with the text.
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 10,
x: 0
},
theme: {
color: "#5ab7f5",
fill: 'white',
'stroke-width': 2,
stroke: '#5ab7f5',
r: 5,
states: {
hover: {
color: 'white',
fill: '#5ab7f5'
},
select: {
fill: '#5ab7f5'
}
}
}
},
Here is the link for reference
If someone wants to avoid using CSS selectors, you can add CSS style to text button using style property.
theme: {
style: { color: "red" },
...
}
Use this selector:
.highcharts-button-box+text {
fill: red !important;
}
Example:
http://jsfiddle.net/vwdfceLz/
You didn't quite go far enough to tspan and you're using color instead of fill. You were also missing a couple "." when selecting the class.
Creating this rule seems to work
g.highcharts-button.highcharts-drillup-button text tspan{
fill: blue;
}
If you don't want to type all of that out .highcharts-drillup-button text tspan should work as well.
DEMO
You can change the color of the text by using the highchart drillup button css styling class to apply the color to the text. The reason why simple color:red property on it wont work because it is a svg created on the run and svg also sets the fill property for the text as well which overwrites the color. On top of that you need to force your custom class colors by using the !important keyword for each property set. So just add the following class in your custom css and you drillup button text will change.
.highcharts-drillup-button text{
color: red !important;
fill: red !important;
}
Hope this helps.
I have HichChart with subTitle. I want to style it, that one part of this text was on left and another on right side.
I've tried to do this using inline css and turn on html for subTitle.
Sample what I have
subtitle: {
text: '<b>This is</b> <span style="float : right !important;text-align: right !important;">the subtitle</span>',
floating: true,
align: 'left',
x: 100,
y: 60,
useHTML : true
}
But this doesn't help.
It is not optimal , but you can overwrite the css style like this fiddle
#container .highcharts-container .highcharts-subtitle {
width:calc(100% + -120px); /*customize this to your needs*/
}
Hope it helps
I added a right position to the subtitle so that it has a full width, otherwise your float does nothing, the only thing i don't understand is why i have to add the left position with the same value as x so that the "subtitle text" doesn't end up outside the chart.
this what i added
style: { "right":"10px", "left": "100px" }
if you want more margin to the right, just increase the right property
full fiddle here http://jsfiddle.net/h70sj57r/4/
and this is how it look like if i don't add the left position(again i have no ideea what calculations it does so that you need to add this) http://jsfiddle.net/h70sj57r/5/
i have a tree and i want to change text color of child elements.
{
text: "alegrbra",
leaf: true,
iconCls : 'button-with-icon icon-flag_green',
style: {
'color': 'red'
}
}
i can change icon but couldnt change the color.
How can i give style that element.
i added
cls : 'rednode'
, and the css is
.rednode{
color: red;
}
It fix me the problem
I have an ExtJS web application that uses an Ext.grid.ColumnModel. For one of the columns, I need to set the background color based
var result = new Ext.grid.ColumnModel(
[
{
xtype: 'actioncolumn',
header: 'Delete',
align: 'center',
width: 50,
border: false,
items: [{
getClass: function (v, meta, record) {
if ((record.get('materialType') == '95'){
this.items[0].tooltip = "Delete all three";
this.items[0].tdCls = 'background-color: #F1F1F1;';
}
else {
this.items[0].tooltip = "Delete just one";
this.items[0].tdCls = 'background-color: #FFFFFF;';
}
}
}
Setting the tooltip works fine; no luck with setting the background color. Any suggestions?
Thanks in advance,
Tim
I believe you need to use the meta param in that getClass function
meta.attr = 'background-color: #F1F1F1;'
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.grid.column.Action
the tdCls attribute is designed to be the name of a css class, not some css instruction. For example :
this.items[0].tdCls = 'myclass'
and in your css :
.myClass { background-color: #FFFFFF;}
If you don't want to use a class you can use the style attribute instead.
See http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer for more information.
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
No CSS setting helped and no higher z-index setting helped either.
Here is my example... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
Thank you.
This css helped me:
.highcharts-container { overflow: visible !important; }
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
Here is what I did and what I suggest everyone to try:
Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:
tooltip: {
useHTML: true
}
Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.
Adding simply this CSS worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
I recently got the same problem, but with bootstrap container ! (bs3)
None of those solutions worked but I found by my own.
Its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
So add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
Tooltip options:
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
None of the solutions worked for me. When the tooltip was bigger than the chart it simply didn't show.
Eventually we realized that Highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
After that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
And make sure to set the z-index higher in the container if you're having any problems.
I would just like to add an example and prove that .highcharts-tooltip-box
doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
Demo:
https://jsfiddle.net/BlackLabel/3fubr1av/