I now have a google chart like this bellow picture
Now I want to move the tooltip to the top of chart (dont care the position of my mouse).
How can I do it.
Here is my code :
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
chartData.addRows(data);
var options = {
chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
title: '',
opacity: 100,
backgroundColor : {fill: '#000'},
hAxis: {
textPosition: 'none',
titleTextStyle: {color: '#333'},
titleTextStyle: {color: '#2902A3'},
},
vAxis: {
textPosition: 'none',
opacity: 100,
minValue: 0,
gridlines: { color: '#0D2B56', count: 10 },
baselineColor: 'white',
},
series:{
0:{
color: '#3C93FF',
areaOpacity: '0.68'
}
},
crosshair: {
orientation: 'vertical',
trigger: 'focus',
color: '#fff'
},
legend: 'none',
tooltip: {isHtml: true},
};
google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);
I also use this function to create tooltip's content
var createToolTip = function (name, value) {
return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}
and this style also
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Thank a lot
Try adding a top property and a position property for the .googletooltip class. If not, try using the margin property if the other properties are not working. Work around these three properties and see if you will be able to move tooltip up. Let me know if it still isn't working.
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Where are you calling createToolTip function? Is it called while generating data chartData.addRows(data);?
Ref: check how createCustomHTMLContent function is used # https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
Related
I am trying to add custom class to my bindTooltip but the new class do not show up. My method based on this question.
My custom popup class is working fine but if I want to overwrite the tooltip class than it is now working.
My JS code:
var PopupClass={'className': 'class-popup'}
var TooltipClass={'className': 'class-tooltip'}
L.marker(
[46.17319713, 21.34458608],
{icon: OnlineMarker}
).bindPopup(
'Test Popup',
PopupClass
).bindTooltip(
'Test Tooltip',
{direction: 'top', permanent: true, offset: [10,0]},
TooltipClass
).addTo(MyMap)
My CSS code:
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background:#2980b9;
color:#fff;
font-size:10px;
line-height:10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color:#2980b9;
}
.class-popup .leaflet-popup-tip-container {
width:40px;
height:20px;
}
.class-popup .leaflet-popup-tip {
background:#2980b9;
}
/* tooltip-class*/
.class-tooltip{
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
You have 2 issues:
You try to specify your Tooltip class using a 3rd argument of .bindTooltip, which does not do anything as per Leaflet doc. Instead, you should merge your className key in the 2nd argument (options). For that, you can either:
write it directly within the options
extend your TooltipClass with your options: L.Util.extend(myOptions, TooltipClass)
use the ES2018 spread operator to do the same as the above point.
Your .class-tooltip selector in CSS is not enough to override the default Leaflet style. Increase your selector specificity, e.g. adding the Leaflet tooltip class: .leaflet-tooltip.class-tooltip
var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
'className': 'class-popup'
}
var TooltipClass = {
'className': 'class-tooltip'
}
L.marker([46.17319713, 21.34458608])
.bindPopup('Test Popup', PopupClass)
.bindTooltip('Test Tooltip', {
direction: 'top',
permanent: true,
offset: [10, 0],
//'className': 'class-tooltip'
...TooltipClass // using spread operator (ES2018)
}, TooltipClass) // 3rd argument does not do anything
.addTo(MyMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(MyMap);
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background: #2980b9;
color: #fff;
font-size: 10px;
line-height: 10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color: #2980b9;
}
.class-popup .leaflet-popup-tip-container {
width: 40px;
height: 20px;
}
.class-popup .leaflet-popup-tip {
background: #2980b9;
}
/* tooltip-class*/
.leaflet-tooltip.class-tooltip {
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>
I'm developing a Web App using ExtJS 4.2, and I want the layout to look something like this:
So far, I've implemented the different colors for the Tab Label. I made a css file with the following properties:
.x-tab-first.x-tab-default-top{
background: rgb(0, 169, 180) !important;
}
.x-tab-second.x-tab-default-top{
background: rgb(251, 183, 18) !important;
}
.x-tab-third.x-tab-default-top{
background: rgb(2, 153, 130) !important;
}
And in each of the tab in the tab panel, I assigned the corresponding class as their cls, so the first tab has x-tab-first as its cls, and so on.
But as you can see in the following photo, if I click on "Find us here", the tab contents changes accordingly, but the bar below does not change:
And for the other two tabs, the bar below does not change as well, it just stays as is.
I have tried this:
.x-tab-second-active.x-tab-bar-body{
background: rgb(251, 183, 18) !important;
}
However I am not quite sure where and how to place this code.
I want the bar below the tab titles to follow the color as well.
As per your requirement, you need to add your activeTab cls to tabbar-strip by manually on tabchange event.
In this FIDDLE, I have created a demo using tabpanel. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
CSS part
<style>
.x-my-tabpanel .x-tab-bar {
background: red;
}
.x-my-tabpanel .x-tab-default-top {
border: 0px !important;
box-shadow: 0px 0px 0px;
}
.x-my-tabpanel .x-tab-bar-strip {
top: 23px;
height: 5px !important;
}
.x-tab-first.x-tab-default-top,
.x-tab-first.x-tab-bar-strip {
background: rgb(0, 169, 180);
border-color: rgb(0, 169, 180);
}
.x-tab-second.x-tab-default-top,
.x-tab-second.x-tab-bar-strip {
background: rgb(251, 183, 18);
border-color: rgb(251, 183, 18);
}
.x-tab-third.x-tab-default-top,
.x-tab-third.x-tab-bar-strip {
background: rgb(2, 153, 130);
border-color: rgb(2, 153, 130);
}
.x-my-tabpanel .x-tab .x-tab-inner {
color: #fff;
}
</style>
ExtJS part
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.tab.Panel', {
height: 200,
renderTo: Ext.getBody(),
cls: 'x-my-tabpanel',
activeTab: 0,
defaults: {
padding: 10
},
items: [{
title: 'What to Expect',
html: 'What to Expect'
}, {
title: 'Find us here',
html: 'Find us here'
}, {
title: 'Game Machenics',
html: 'Game Machenics'
}],
listeners: {
/*
* this event will fire on view render
*/
afterrender: function (panel) {
var clsArr = ['first', 'second', 'third'];
panel.query('tab').forEach((item, index) => {
let cls = `x-tab-${clsArr[index]}`;
item.addCls(cls);
item.cls = cls;
});
this.addToStripCls();
},
/*
* this event will fire on tab change
*/
tabchange: function (panel, newtab) {
this.addToStripCls();
}
},
/*
* this function will set active tab cls to strip
* before to adding we need to remove previous cls
*/
addToStripCls: function () {
var strip = Ext.get(this.el.query('.x-tab-bar-strip')[0]),
clsArr = ['first', 'second', 'third']
clsArr.forEach(el => {
if (strip.hasCls(`x-tab-${el}`)) {
strip.removeCls(`x-tab-${el}`);
}
});
strip.addCls(this.activeTab.tab.cls);
}
});
}
});
how do I shrink the area between these displayfields?
I've tried moving padding... margins... nothing seems to work. When I do end up getting the labels the way they should look (with very little space)... then the values are not aligned next to the label correctly.
this is how I have it setup.
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
//defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [
{
xtype: 'displayfield',
fieldLabel: 'Client',
bind: {
value: '{selectedClientListModel.ClientName}'
},
fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;'
//ui: 'dark'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Desc',
itemId: 'textfieldAcctDesc',
bind: {
value: '{selectedManager.AcctShortCode}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Num',
itemId: 'textfieldAcctNum',
bind: {
value: '{selectedManager.AcctNum}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;'
}
]
}, {
displayfields are intended to align neatly with other form fields - which have spacious borders around their input fields. For that reason, displayfields have the same height, they even haven't got a different SCSS variable for displayfield height.
Furthermore, from the CSS classes available, the fieldLabel cannot distinguish between being a displayfield's label and another field's label. Because of that, you will have to give your displayfield at least a custom userCls, or else all your regular form fields will look ridiculous.
Then you can go and add some CSS like this:
.myUserCls,
.myUserCls .x-form-item-label,
.myUserCls .x-form-display-field
{
line-height:16px;
min-height:16px;
margin-bottom:0;
margin-top:0;
padding-top:0;
}
I have made you a fiddle.
i'm using highcharts for genetating graphs, problem is, highcharts is generating space between border and content of Tooltip and labels of the Pie diagram is visible between that generated space.
can any has solving for my problem.
Please check with below example.
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
margin: 40,
text: 'Podíl všech potřeb'
},
tooltip: {
borderWidth: 1,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function () {
return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
zIndex: 1,
enabled: true,
color: '#000000',
connectorWidth: 2,
useHTML: true,
formatter: function () {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
}
}
}
},
series: [{
type: 'pie',
name: 'Potřeba',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}, ['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
.label {
z-index: 1!important;
}
.highcharts-tooltip span {
background-color:white;
border:1px solid green;
opacity:1;
z-index:9999!important;
}
.tooltip {
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>
tooltip space between order and content highcharts
SVG tooltip elements can be hidden through:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
Example: http://jsfiddle.net/x8Lq0yr9/1/
This will eliminate the space between border and HTML content.
you are using div class="tooltop" where as tooltop class is nowhere. Also, .highcharts-tooltip is used in highcharts at two places . one at datalables and second in tiiptip.
Unless you want specific border color , you can remove that css class from your code and tooltip loks good.
.tooltipSpan {
opacity:1;
z-index:9999!important;
width:100%;
}
See this Fiddle
Highcharts creates these using svg which makes it so the background shows up underneath certain elements. To avoid this undesired behavior the border and background settings have been turned off and all these are controlled, instead, using html in the formatter function. Using HTML makes it so the background does not show up underneath certain elements.
tooltip: {
backgroundColor: undefined,
borderColor: undefined,
borderWidth: 0,
}
I would like the label text on my Highcharts treemap to be white with a black border, so that it is consistent and clearly visible on all colors. Is this possible? I have played with the textShadow options, and it looks okay (although not great) in Chrome, but it looks very unprofessional in Internet Explorer. See the fiddle here:
https://jsfiddle.net/k1hohozg/4/
$(function () {
$('#container').highcharts({
title: "",
series: [{
type: "treemap",
data: [
{
name: 'Name One',
value: 20,
color: "#FFFF00"
}, {
name: 'Name Two',
value: 20,
color: '#000099',
}, {
name: 'Name Three',
value: 1,
color: '#007799',
}, {
name: 'Name Four',
value: 1,
color: '#FFCC00',
}
],
levels: [{
level: 1,
dataLabels: {
enabled: true,
align: 'center',
style: {
fontSize: '20px',
color: '#FFFFFF',
textShadow: "0 0 3px #000, 0 0 3px #000",
}
},
}],
}],
});
})
I do not want to use the "contrast" option because I need all the text to look the same, hence white with a black border. What is the best way to make this look better in all standard browsers?
Thanks!
There is no default Highcharts way to deal with IE rendering poorly text-shadow. It is possible to set useHTML to true and add multiple labels that will be imitating shadow. (Looks fine in Chrome, Firefox and IE11).
Example: http://jsfiddle.net/yzLavxc9/2/
....
dataLabels: {
useHTML: true,
formatter: function () {
return '<div class=dataLabelContainer><div style="position: absolute; top: -1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: 1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: 1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; top: -1px; left: -1px; color: #000;">'+this.key+'</div><div style="position: absolute; color: #fff;">'+this.key+'</div></div><div style="color: #fff;">'+this.key+'</div></div>';
},
enabled: true,
align: 'center',
style: {
fontSize: '20px',
....
I think this is not possible with the textShadow attribute wich is not well interpreted with IE. However you can add a background on your labels to be more visible :
$(function() {
$('#container').highcharts({
title: "",
series: [{
type: "treemap",
data: [{
name: 'Name One',
value: 1,
color: "#FFFF00"
}, {
name: 'Name Two',
value: 1,
color: '#000099',
}],
levels: [{
level: 1,
dataLabels: {
enabled: true,
align: 'center',
borderRadius: 5,
backgroundColor: 'rgba(255, 255, 255, 1)',
style: {
fontSize: '20px',
color: '#000',
}
},
}],
}],
});
})
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
You can inspire yourself from the documentation:
http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.backgroundColor