is there any way to change font size of chart in hightcharts jquery??
i've tried the fontsize option, but it doesn't works at all..
i tried to make the legend font smaller so that it can fit to the cart with no new line created if the legend to long.
maybe anyone ever tried it??
here is my script:
options = {
chart: {
backgroundColor: {
linearGradient:[0, 0, 500, 500],
stops: [
[0, 'rgb(255,255,255)'],
[1, 'rgb(237,236, 250)']]},
type: tGraf,
renderTo: contGrafik,
defaultSeriesType: 'column',
width: sWidth
},
title: {
text: 'Human Resources',
style: {
font: 'normal 14px Verdana, sans-serif',
color : 'black'
}
},
subtitle: {
text: '',
style: {
font: 'normal 11px Verdana, sans-serif',
color : '#000099'
}
},
xAxis: {
title: {
text : ''
},
labels: {
rotation: 0,
align: 'right',
style: {
font: 'normal 11px Verdana, sans-serif',
color : 'black'
}
},
},
yAxis: {
allowDecimals : false ,
labels: {
align: 'right',
style: {
font: 'normal 11px Verdana, sans-serif',
color : 'black'
}
},
gridLineColor: '#EEEFE1',
title: {
text: 'Employees',
style: {
font: 'normal 13px Verdana, sans-serif',
color : 'black'
}
}
},
plotOptions: {
column: {
dataLabels : {
enabled : true,
formatter: function() {
return this.y;
}
},
cursor: 'pointer'
}},
legend: {
itemWidth : uLegend,
style: {
font: 'normal 5px Verdana, sans-serif',
color : 'black',
}
symbolPadding: 2,
symbolWidth: 15,
backgroundColor: '#FFFF99',
itemStyle: {
cursor: 'pointer',
color: '#3E576F'
},
width: 600,
align: 'center',
layout: 'horizontal'},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y + ' Orang';
}
}
};
You might be looking for itemStyle option of a legend:
legend: {
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
}
I am sure the answer given by Igor is good, but if you want to change the text at every place in you graph in one shot, just open the highchart.js file and put the desired font style over there. Just providing the modification which I have done in my case:
style:{fontFamily:' "Exo 2", sans-serif',fontSize:"12px"},backgroundColor:"#FFFFFF"
Here I have changed "Lucida" to "Exo 2". :)
https://www.sitepoint.com/auto-text-fill-resize-plugins/
check this site,
you will find 5 ways to resize the size using the jquery,
i have tried the first one, it already worked
Related
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
Here is my code:
window.revenueIncomeChart = new Highcharts.Chart('revenueIncomeChartBox', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: chartData.categories,
title: {
text: null
},
labels: {
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
yAxis: {
title: {
text: null
},
className: 'axis-class',
labels: {
formatter: function() {
return '$ ' + this.value + $.trim(chartData.tooltipSuffix);
},
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
tooltip: {
valueSuffix: chartData.tooltipSuffix,
valueDecimals: 2,
shared: true,
split: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
borderColor: '#f2f2f2',
backgroundColor: '#FFFFFF',
shadow: false,
itemStyle: {
fontSize: '16px',
color: '#797979',
fontWeight: 'normal'
}
},
credits: {
enabled: false
},
series: chartData.series
});
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
I have a column chart as in the picture below. How do I draw a responsive horizontal line (and label) outside the chart area?
I know we could achieve something similar using plotLines and plotBands but the value has to be the one within the value range in the series, and the line won't be drawn outside the chart either.
In my case, I want to draw the line outside the chart area, specifically under the xAxis (see the line in red color).
Is there a way to do that?
$(function() {
Highcharts.chart('sd-median-annual-earnings-chart', {
credits: {
enabled: false
},
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
}
},
title: {
text: 'Median Annual Earnings',
style: {
color: '#000',
fontFamily: 'inherit',
fontSize: '1.2em',
fontWeight: 700
}
},
xAxis: {
categories: [
'A',
'B',
'C',
'D'
],
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickWidth: 0
},
yAxis: {
min: 0,
max: 40000,
gridLineColor: '#d6d6d6',
title: {
text: 'Percent',
style: {
color: '#FFFFFF',
fontFamily: 'inherit',
fontSize: 'inherit'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickPositioner: function(min, max) {
var each = Highcharts.each,
ticks = [];
for (var i = min; i <= max; i++) {
if (i % 5000 === 0)
ticks.push(i);
}
return ticks;
}
},
tooltip: {
enabled: false
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000'
},
itemHoverStyle: {
color: '#86BC25'
},
itemMarginBottom: 5
},
plotOptions: {
column: {
pointPadding: 0,
borderColor: null,
dataLabels: {
enabled: true,
color: '#000',
format: "{y}",
style: {
textOutline: false
}
},
events: {
legendItemClick: function() {
return false;
}
}
},
series: {
groupPadding: 0.1
}
},
series: [{
name: 'A',
color: '#000',
data: [10000, 34000, 25000, 6000]
}, {
name: 'B',
color: 'blue',
data: [5000, 4000, 10000, 20000]
}, {
name: 'C',
color: '#046A38',
data: [6000, 15000, 5000, 1500]
}, {
name: 'D',
color: 'green',
data: [8700, 12000, 7000, 15000]
}]
});
});
html,
body {
padding: 0;
margin: 0px;
font-family: Helvetica, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="height:450px;width:100%;"></div>
Here is my fiddle: https://jsfiddle.net/Brianing/wtoy7L15/
Use SVGRenderer to add line and text inside charts
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
},
events: {
load: function() {
var ren = this.renderer,
stline = ['M', 100, 0, 'L', 340, 0];
ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
.css({
fontSize: '10px',
color: '#FF0000'
})
.add();
ren.path(stline)
.attr({
'stroke-width': 2,
stroke: '#FF0000'
})
.translate(this.chartWidth - 360, this.chartHeight - 50)
.add();
}
}
},
Note works best on fixed sized containers
$(function() {
Highcharts.chart('sd-median-annual-earnings-chart', {
credits: {
enabled: false
},
chart: {
type: 'column',
backgroundColor: null,
style: {
fontSize: 'inherit',
overflow: 'visible',
width: '100%'
},
events: {
load: function() {
var ren = this.renderer,
stline = ['M', 100, 0, 'L', 340, 0];
ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
.css({
fontSize: '10px',
color: '#FF0000'
})
.add();
ren.path(stline)
.attr({
'stroke-width': 2,
stroke: '#FF0000'
})
.translate(this.chartWidth - 360, this.chartHeight - 50)
.add();
}
}
},
title: {
text: 'Median Annual Earnings',
style: {
color: '#000',
fontFamily: 'inherit',
fontSize: '1.2em',
fontWeight: 700
}
},
xAxis: {
categories: [
'A',
'B',
'C',
'D'
],
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickWidth: 0
},
yAxis: {
min: 0,
max: 40000,
gridLineColor: '#d6d6d6',
title: {
text: 'Percent',
style: {
color: '#FFFFFF',
fontFamily: 'inherit',
fontSize: 'inherit'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000'
}
},
tickPositioner: function(min, max) {
var each = Highcharts.each,
ticks = [];
for (var i = min; i <= max; i++) {
if (i % 5000 === 0)
ticks.push(i);
}
return ticks;
}
},
tooltip: {
enabled: false
},
legend: {
symbolRadius: 0,
itemStyle: {
color: '#000'
},
itemHoverStyle: {
color: '#86BC25'
},
itemMarginBottom: 5
},
plotOptions: {
column: {
pointPadding: 0,
borderColor: null,
dataLabels: {
enabled: true,
color: '#000',
format: "{y}",
style: {
textOutline: false
}
},
events: {
legendItemClick: function() {
return false;
}
}
},
series: {
groupPadding: 0.1
}
},
series: [{
name: 'A',
color: '#000',
data: [10000, 34000, 25000, 6000]
}, {
name: 'B',
color: 'blue',
data: [5000, 4000, 10000, 20000]
}, {
name: 'C',
color: '#046A38',
data: [6000, 15000, 5000, 1500]
}, {
name: 'D',
color: 'green',
data: [8700, 12000, 7000, 15000]
}]
});
});
html,
body {
padding: 0;
margin: 0px;
font-family: Helvetica, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="width: 600px; height: 250px; margin: 0 auto"></div>
I am plotting the values dynamically in highcharts column charts. I have displayed the data labels with -90 degree rotation to avoid the overlapping. But It has some issues like the values are cut off by the axis.
I have tried the y offset option. But The values are plotted dynamically. So I couldn't set this value as fixed one.
JS Fiddle : a link
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2014'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 2341.7],
['Lagos', 165.1],
['Istanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['São Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
useHTML:true,
crop:false,
enabled: true,
rotation: -90,
color: '#000000',
inside:true,
style: {
fontFamily: 'Verdana, sans-serif',
fontWeight: "bold"
, fontSize: "15px"
}
}
}]
});
`
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
`
Setting the align attribute to "left" could work.
dataLabels: {
align: "left"
}
See here: https://jsfiddle.net/t15eg1qm/3/
Try to set yAxis type to logarithmic, and its minorTickInterval to 0.1. Logarithmic scale fits to this type of data perfectly. Lets look at code below:
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1,
title: {
text: 'Population (millions)'
}
},
Here is your refactored JSFiddle: https://jsfiddle.net/daniel_s/x5oxyt2v/
Best Regards!
I want to give a color for bars depending on their values.
For example if you a bar value 5000 then the color should be Dark RED similar for 3000 less darker than 5000 bar values so on...
I want to add total space like 100TB above all bars(some text on my bar value)
`
Availability Bar Chart
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Disk Utility'
},
subtitle: {
text: 'Source: Application Name'
},
xAxis: {
categories: ['Checkout', 'Hermes', 'Hybris', 'Marketplace', 'Mobile'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Used (TB)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
data: [107, 311, 635, 203, 244]
}]
});
});
Fiddle
Here is updated fiddle
You can use "Zones" in plotoptions to define a range and relevant color , as per code below :
zones: [{
value: 200,
color: '#bdbdbd'
},{
value:300,
color: '#ff0000'
},
{
value:500,
color: 'blue'
},{
value:800,
color: 'black'
}]
For the past two days I've been trying real hard to figure out a way on how to provide a custom stack label instead of using the this.stackTotal option.
My Scenario is, the label for each stack is not basically dependent on each series but rather a multitude of factors. Therefore the client wants to set an arbitrary value to the end of each stacked bar. What I have so far is this (http://jsfiddle.net/yybLxgkd/) but have been unsuccessful so far in trying to display a custom label at the end of each stacked bar.
I tried to pass-in the value that I needed to be displayed at the end of each stack from within the series by providing a series option called QTotal, but later I realized that the stackLabel does not support (this.point.series). So I tried to play around and get atleast the category name displayed at the end of each bar but this too has been in complete vain.
I would really appreciate any help I can get in trying to resolve this issue.
Once again, what I what I would like to accomplish is display a custom label for each stack rather than (this.stackTotal) option.
My logic was perhaps I could initiate a loop for all the categories, from the stackLabel formatter, that are present and depending on the category - display the arbitrary value that is needed.
Many Thanks,
Jerry
My code is below:
$(function () {
var categoriesVal = {
'Term 1':'Term 1',
'Term 2':'Term 2',
'Term 3':'Term 3',
'Term 4':'Term 4',
'Term 5':'Term 5'
};
$('#container').highcharts({
chart: {
defaultSeriesType: 'bar',
style: {
fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
}
},
title: {
text: 'Serious AEs',
style: {
fontSize:'1.2em',
fontWeight:'bold'
}
},
xAxis: {
categories: ['Term 1','Term 2','Term 3','Term 4','Term 5'],
// lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
title: {
text: '',
style: {
color:'#000',
fontSize:'.8em'
}
},
labels: {
style: {
fontWeight:'bold'
}
}
},
yAxis: {
min: 0,
//lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
//gridLineWidth:0,
//gridLineColor:'#eee',
title: {
text: 'Total',
rotation:0,
style: {
color:'#000',
fontSize:'.8em'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
// color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
// var s = this.series.options.QTotal;
// return Highcharts.numberFormat(Math.round(s*100)/100,2)+'%';
return categoriesVal[this.value]+' Test';
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
//shared: true,
crossHairs: true,
//useHTML: true,
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y + this.point.dtLabel; /*+'<br/>'+
'Total: '+ this.point.stackTotal*/;
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
/*formatter:function(){
return this.point.dtLabel;
},*/
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [
{
name: 'Not Serious',
data: [{y:2,dtLabel:'<br />Subject(s):0012001,006007'},6, 3, 3, {y:4,dtLabel:'<br />Subject(s):0012001,006007'}],
color: '#000000',
QTotal:0.79
},
{
name: 'Serious Severe',
data: [0,0,0,2, 5],
color: '#FF0000',
QTotal:0.79
},
{
name: 'Serious Moderate',
data: [2, 2, 3, 2, 1],
color: '#00FF00',
QTotal:0.79
},
{
name: 'Serious Mild',
data: [5, 3, 4, 7, 2],
color: '#0000FF',
QTotal:0.79
}
]
});
});
The stack label this doesn't contain a reference back to its series because it's a combination of all the series; so I'm not sure how you'd map a series QTotal to each stack.
The easiest way to do this would be to place your custom property directly into the stackLabel options:
stackLabels: {
qTotals: ['This','is','a','qTotal','!'],
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.options.qTotals[this.x];
}
}
Updated fiddle.