I'm using Highcharts for my web page and I can't seem to figure out how to correctly change the font size of the title and key at the bottom. I'm using the basic column with green background: http://www.highcharts.com/demo/column-basic/dark-green
Currently this is my code:
Function:
$(function () {
$('#content').highcharts({
chart: {
type: 'column'
},
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
},
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
categories: [
' '
]
},
yAxis: {
min: 0,
title: {
text: 'MMBTUs x 10,0000',
style:{
color: 'white',
fontSize: '25px'
}
},
labels: {
style: {
color: 'white',
fontSize:'25px'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2009',
data: [4900000]
}, {
name: '2010',
data: [4900000]
}, {
name: '2011',
data: [5500000]
}, {
name: '2012',
data: [5200000]
}]
});
});
Html call:
<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>
and as stated I'm using the Highcharts green theme provided by the website when you click view visual theme.
Now my problem is when I change:
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
depending on how big my font size is the 4 values (2009, 2010, 2011, 2012) are either not visable or the move out of the box below the chart. The box itself doesn't resize (which it does in jfiddle which doesn't include the theme). The same thing happens with:
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
the color changes based on my value but the font size doesn't. Any help would be appreciated.
That theme uses font instead of fontSize. So, it's legend is defined as:
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
If you define your's with both font and fontSize, it'll work (seems like a bug to me, but maybe it's a feature):
legend: {
itemStyle: {
fontSize:'20px',
font: '20pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
I assume the title has the same thing going on.
http://jsfiddle.net/kHzr9/
Related
I would like to center align the total (value 20/40) but without the label and also change the color. Unfortunately, only label can accept color but still it cant be vertically center aligned.
var options = {
series: [20,40],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
showAlways: true,
label: '',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return `${a}/${b}`
})
}
}
}
}
}
},
colors: ['#0065bd', '#dbecf8'],
chart: {
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#responsive-chart"),
options
);
chart.render();
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
font-family: 'Poppins', sans-serif;
}
#chart {
max-width: 260px;
margin: 35px auto;
opacity: 0.9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="chart">
<div id="responsive-chart"></div>
</div>
You can center value by change offsetY in plotOptions. You can also change color there. https://apexcharts.com/docs/options/plotoptions/pie/#value
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {...},
value:{
offsetY: -8, // -8 worked for me
color:'#ff00ff'
}
}
}
}
},
Thought I would answer my question how I managed to achieve this finally.
To apply font colour - Instead of
total: formatter function(w) {
}
I used label: property.
To position the text to center, I had to dig through the Apex charts code and found this code which is using name.OffsetY to position.
https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Pie.js
if (dataLabelsConfig.name.show) {
let elLabel = graphics.drawText({
x,
y: y + parseFloat(dataLabelsConfig.name.offsetY),
text: name,
textAnchor: 'middle',
foreColor: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
})
This is how my plotoptions looks like
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
offsetY: 10,
},
total: {
show: true,
showAlways: true,
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
label: `${data[0]}/${data[1]}`,
color: '#0065bd',
formatter: function (w) {
return '';
}
}
}
}
}
},
Im using highcharts that now we have so much item, i need something to make it readable and scrollable, i have added zoom property but it doesnt meet requiriments, any idea?
this is my code :
Highcharts.theme = {
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
zoomType: 'x',
backgroundColor: null,
style: {
fontFamily: "Dosis, sans-serif"
}
},
title: {
style: {
fontSize: '16px',
fontWeight: 'bold',
textTransform: 'uppercase'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'rgba(219,219,216,0.8)',
shadow: false
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
gridLineWidth: 1,
labels: {
style: {
fontSize: '12px'
}
}
},
yAxis: {
minorTickInterval: 'auto',
title: {
style: {
textTransform: 'uppercase'
}
},
labels: {
style: {
fontSize: '12px'
}
}
},
plotOptions: {
candlestick: {
lineColor: '#404048'
}
},
scrollbar: {
enabled: true
},
// General
background2: '#F0F0EA'
};
i have been added zoomType: 'x' for now, but i need to work with scrollable too. what property i should use? i already try highstock but it doesnt work with drilldown charts.
Use can use scrollablePlotArea property. Also, drilldown works with Highstock: http://jsfiddle.net/BlackLabel/9ap2sj7k/
chart: {
scrollablePlotArea: {
minWidth: 1200
}
}
Live demo: http://jsfiddle.net/BlackLabel/b0f2dq3g/
API: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
I've tried various ways of updating treemap color axis legend font size and font family
var options = {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
style: {
fontSize: '10px',
fontFamily: 'Arial'
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
name: 'G',value: 1,colorValue: 7}] }],
title: {
text: 'Highcharts Treemap'
}
};
var chart = Highcharts.chart('container', options);
$('#update').click(function () {
chart.update({
chart:{
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
legend: {
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
colorAxis: {
labels: {
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
}}
});
chart.legend.update({
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
})
});
Please see here - http://jsfiddle.net/hsuh/t04qe2xx/8/
Style doesn't seem to be updated. Please help. Thanks
Your click event is not fired because of the difference in id.
Remove hash from button's id: <button id='update'> Update </button>
Then you can update axis via axis.update()
$('#update').click(function() {
chart.colorAxis[0].update({
labels: {
style: {
fontSize: '20px'
}
}
})
});
example: http://jsfiddle.net/t04qe2xx/9/
I'm trying to have my tooltips display my y value instead of the percentage they currently do. For example, when hovering over Yellow, the tooltip reads 22.6%. It should instead read 91.5 yellow skittles.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Skittles By Color' },
subtitle: { text: '15.4 oz (437 g) Bag' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' },
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Color %',
data: [
{ name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'},
{ name: 'Purple', y: 71, color: '#660066' },
{ name: 'Red', y: 88.0, color: '#dd0000' },
{ name: 'Orange', y: 91, color: '#ff6600' },
{ name: 'Yellow', y: 91.5, color: '#ffff00' }
]
}]
});
});
jsfiddle
Do you see the tooltip section in your code? That's what you need to change:
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
...should be...
pointFormat: '<b>{point.y} skittles</b>'
As demonstrated here: http://jsfiddle.net/jpotLvt7/11/.
When you have problems like this in the future, I'd recommend looking in your code to see if there are any parts that have names relevant to your issue. In this case, it wasn't too hard to find. You wanted to change the tooltip text, and there was a tooltip { ... } part of your code.
Highcharts Bar chart doesn't render well when they are put inside HTML Table. Issue is reproduced in this Fiddle. Rendering problem can be seen when opened in IE 10(works well in chrome).
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'Chart3container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: BarData.categories,
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = BarData.bardataarray;
chart1 = new Highcharts.Chart(options);
});
When put outside table, it works well. Here is the related Fiddle.
I need table for proper alignment.
You can disable animation or use CSS styles like here:
<table>
<tr>
<td style="width:287px;height: 278px; vertical-align: top;position:relative;">
<div id="container1" style="position:absolute;height: 270px; width:287px;overflow: hidden;"></div>
</td>
</tr>
</table>
Related topic: https://github.com/highslide-software/highcharts.com/issues/1157