I am editing a widget in my new install. I have a temperature widget and I have been playing with the styling.
For the life of me, I can't seem to align the title of my widget to the center.
{
"fontWeight": 900,
"textAlign": "center"
}
{
"fontWeight": 900,
"text-Align": "center"
}
{
"fontWeight": 900,
"align": "center"
}
{
"fontWeight": 900,
"fontAlign": "center"
}
None of these permutations work. Any help?
Cheers,
Coach
If that is CSS, try text-align :center;
If you want to bold the text try font-weight: bold;
Related
I am trying to increase the line spacing in my Highcharts tooltip in styled mode. I have tried using CSS to set line-height on the .highcharts-tooltip as well as its text and tspan elements:
.highcharts-tooltip,
.highcharts-tooltip text,
.highcharts-tooltip tspan
{
line-height: 40px;
}
I have also tried using the tooltip.style option:
tooltip: {
style: { lineHeight: 40 }
}
Neither approach has any effect in styled mode. Has anyone managed to make this work?
You need to enable useHTML property for a tooltip.
tooltip: {
useHTML: true,
...
}
CSS:
.highcharts-tooltip {
line-height: 40px;
}
Live demo: http://jsfiddle.net/BlackLabel/893k5cnL/
API Reference: https://api.highcharts.com/highcharts/tooltip.useHTML
When I hover on series, It shows perfect data but title in background is also visible.
See these images
Actual chart
Tooltip
Here is code link - https://jsfiddle.net/gkd/97mk583y/
tooltip & Title both are generated using useHTML: true
How can we make sure title doesn't appear in background of tooltip ?
opacity in background color is already 1.
Because both of this elements are outstanding HTML elements try to use this config rather than inline styling:
"tooltip": {
padding: 0,
"style": {
"color": "#FFFFFF"
},
"enabled": true,
"useHTML": true
},
And CSS:
.highcharts-tooltip>span {
padding: 10px;
margin: 0;
background-color: rgba(0, 0, 0, 1);
z-index: 9999 !important;
}
Demo: https://jsfiddle.net/BlackLabel/z5Lb1hmt/
Highchart Legend rendering issue on Linux browsers, I think issue Happens in font family in highcharts. how to add custom font family to legend
Below added my code
title: {
text: c,
widthAdjust: -180
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
legend: {
itemStyle: {
width:'100px',
color: '#666',
textOverflow: 'ellipsis',
overflow: 'hidden'
}
},
To change the font family of the legend, you need to set fontFamily of legend.itemStyle like this:
legend: {
itemStyle:{
fontFamily: 'Comic Sans MS'
}
}
Working example: http://jsfiddle.net/sc3Lnfa9/5/
Some datalabels in my barchart aren't shown: Only one datalabel is shown at the categories "Wohnung Zustand", "Wohnumfeld" and "Wohn- und Nebenkosten".
My current solution is to chose a smaller font-size
dataLabels: {
style: {
fontSize: '7pt',
fontFamily: '"Tahoma"',
fontWeight: 'normal'
}
but now the label is hard to read. I'd like to have a bigger font-size and overlapping labels, but my overflow and crop-settings don't work.
There is an allowOverlap-setting: the chart with overlapping datalabels..
dataLabels: {
enabled: true,
allowOverlap: true,
}
Can someone please suggest if there is anyway we can rename the items in the export menu in highcharts. Currently it has entries like:
Download PNG image
Download JPEG image
...
I want to remove word "image". Moreover want to control the complete styling.
There are lots of options for this. Some can be done in Javascript, and I'm sure more can be done in CSS. Here is a JSFiddle example showing the desired text changes and some style changes.
You can read the details on this in the API under lang and navigation.
The text is changed with:
lang: {
printChart: 'Print chart',
downloadPNG: 'Download PNG',
downloadJPEG: 'Download JPEG',
downloadPDF: 'Download PDF',
downloadSVG: 'Download SVG',
contextButtonTitle: 'Context menu'
}
And the style of the button and menu with:
navigation: {
menuStyle: {
border: '1px solid #A0A0A0',
background: '#FFFFFF',
padding: '5px 0'
},
menuItemStyle: {
padding: '0 10px',
background: null,
color: '#303030',
fontSize: '11px'
},
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'
},
buttonOptions: {
symbolFill: '#E0E0E0',
symbolSize: 14,
symbolStroke: '#666',
symbolStrokeWidth: 3,
symbolX: 12.5,
symbolY: 10.5,
align: 'right',
buttonSpacing: 3,
height: 22,
// text: null,
theme: {
fill: 'white', // capture hover
stroke: 'none'
},
verticalAlign: 'top',
width: 24
}
}
You can get the default values from the source code, almost at the very top. Some of the defaults use variables that you won't have though, so you may need to change them. And as mentioned, CSS may get you the extra distance.