I plot a stacked column Highchart. The chart is working fine but there is some style issues. The Y-axis names are showing above the chart so the subtitle is not showing I need to show the Y-axis names below.How can I change this?Thanks in advance for help...
Here is my code
<script type="text/javascript">
$(function () {
$('#chart_div').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Material Vs Subcategory'
},
subtitle: {
text: 'Source: www.test.com'
},
xAxis: {
categories: ['Air Filtration','Clothing','Sporting Goods','Home Furnishings','Paint','Storage','Toys and Games']
},
yAxis: {
min: 0,
title: {
text: 'Number of Products'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Unclassifiable',
data: [0, 1, 0, 0, 1, 0, 0]
},{
name: 'Aluminium',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Calcium',
data: [0, 0, 0, 1, 0, 0, 0]
},{
name: 'Copper',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Gold',
data: [0, 1, 0, 0, 1, 1, 0]
},{
name: 'Iron',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Platinum',
data: [0, 0, 0, 0, 1, 0, 1]
},{
name: 'Silver',
data: [0, 3, 3, 0, 0, 0, 0]
},{
name: 'Steel',
data: [1, 0, 0, 1, 0, 0, 0]
},{
name: 'Unknown',
data: [0, 1, 0, 0, 1, 0, 0]
}]
});
});
</script>
Taking out the "Floating" and x/y positions makes it look a little cleaner too:
legend: {
verticalAlign: 'bottom',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
http://jsfiddle.net/38Mkf/1/
Is that you want verticalAlign: bottom on legend part?
legend: {
align: 'right',
x: -70,
verticalAlign: 'bottom',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
http://jsfiddle.net/38Mkf/
Related
I'm trying to add icons in dataLabels, I successfully added some HTML like this return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>';, but now I want to add icons instead, I'm using **Ionicons*. Here's the code:
var chart=Highcharts.chart(id, {
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
exporting: { enabled: false },
title: {
text: ''
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
from: 0,
to: partial+rejected,
backgroundColor: '#f55',
innerRadius: '85%',
outerRadius: '50%',
shape: 'arc',
},
},
yAxis: [{
lineWidth: 0,
min: 0,
max: parseInt(val),
tickInterval: 1,
tickPosition: 'outside',
minorTickColor: '#FF0000',
tickColor: '#FF0000',
tickWidth: 2,
tickLength: 10,
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 5,
title:{text:'Total: '+val,style:{ color:"#333" }},
labels: {
distance: 25,
},
offset: 5,
endOnTick: false,
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
plotBands: [{
from: 0,
to: delivered,
color: '#21A121',
thickness: '15%',
id: 'plot-band-1'
}]
}],
series: [{
name: 'Managed',
data: [{
id: 'deliver',
y: parseInt(total),
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 10,
baseLength: '5%',
baseWidth: 15,
rearLength: '0%',
}
}],
dataLabels: {
formatter: function () {
var total = this.y;
return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
},
backgroundColor: {
linearGradient: {
x1: 10,
y1: 10,
x2: 10,
y2: 11
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' '
}
}]
});
The part I'm trying to get right is at dataLabels, if there's any information you may need to understand what I'm trying to achieve, just ask me, thanks in advance
Simply, get Ionicons CSS file (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css) and return adequate icon in dataLabels.formatter function. You need to remember that the property useHTML must be set to true.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter
Example:
http://jsfiddle.net/h0xLzv8h/
I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.
Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.
Here's a fiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
Would appreciate any help, thanks!
You should adjust the image position via x, y properties.
x: 0,
y: 30,
example: https://jsfiddle.net/ptezqnbf/1/
or even better, use renderer.image and control the position directly.
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
example: https://jsfiddle.net/tpp1gdau/1/
http://jsfiddle.net/1xgzmp1x/
This is a Bullet style chart using Highcharts.
I can't get this to work for the life of me when I copy it over to Dreamweaver. When i load in my browser I get a blank page.Other Highchart charts load fine.
Any help?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
.body {
font-family:helvetica, sans-serif;
font-size:.7em;
}
.p {
margin:.5em 1em;
}
</style>
<script type+"text/javascript">
Highcharts.Renderer.prototype.symbols.line = function (x, y, width, height) {
return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
borderWidth: 0,
borderColor: '#eee',
margin: [0, 0, 20, 100]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
tickLength: 0,
tickColor: '#eee',
gridLineWidth: 0,
gridLineColor: '#eee',
labels: {
style: {
fontWeight: 'bold'
}
},
lineColor: '#eee',
lineWidth: 0,
categories: ['Measure 1', 'Measure 2', 'Measure 3', 'Measure 4', 'Measure 5']
},
yAxis: {
tickInterval: 2,
allowDecimals: false,
tickColor: '#ccc',
tickWidth: 0,
tickLength: 3,
lineColor: '#eee',
lineWidth: 0,
gridLineWidth: 0,
gridLineColor: 'rgba(255,255,255,.15)',
endOnTick: true,
title: {
text: ''
},
//gridZIndex:4,
min: -0.5,
max: 11.75,
endOnTick: false,
startOnTick: false,
plotLines: [{
value: 10.5,
width: 0,
color: '#eee'
}],
labels: {
y: 10,
style: {
fontSize: '10px'
},
formatter: function () {
if (this.value) {
return '$' + this.value + 'M';
} else {
return this.value;
}
}
}
},
tooltip: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, .85)',
borderWidth: 0,
shadow: true,
style: {
fontSize: '10px',
padding: 2
},
formatter: function () {
return this.series.name + ": <strong>" + "$" + Highcharts.numberFormat(this.y, 2) + "M" + "</strong>";
}
},
plotOptions: {
bar: {
grouping: false,
shadow: false,
borderWidth: 0,
pointPadding: .25,
groupPadding: 0
},
scatter: {
marker: {
symbol: 'line',
lineWidth: 3,
radius: 9,
lineColor: '#333'
}
}
},
series: [{
name: 'Bands 3',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.1)',
data: [2, 1.5, 1.5, 1.5, 2]
}, {
name: 'Bands 2',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.4)',
data: [2, 1.5, 1.5, 2, 3]
}, {
//pointRange:1.1,
name: 'Bands 1',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.7)',
data: [6, 7, 7, 6.5, 5]
}, {
name: 'Measure',
color: 'rgba(56,56,56,1)',
pointRange: .5,
zIndex: 10,
data: [7, 5, 9, 3, 6]
}, {
name: 'Target',
type: 'scatter',
zIndex: 20,
data: [7.5, 8, 7.5, 8.5, 8.5]
}]
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:350px;width:400px;margin:1em;"></div>
</body>
</html>
I would like to place my X-axis labels inside my columns and rotated to a vertical position. I've searched the web endlessly, but as of now, nothing seems to work, so I'll try and post my specific problem.
Here's the fiddle:
http://jsfiddle.net/D43q9/1/
$(document).ready(function() {
function chart() {
var change = {
0: '',
25: '',
50: '',
75: '',
100: ''
};
$('#chart').highcharts({
legend: {
enabled: false
},
tooltip: {
enabled: false
},
chart: {
type: 'column',
marginTop: 0,
backgroundColor: 'transparent',
spacingTop: 0,
spacingRight: 20,
spacingBottom: 20,
spacingLeft: 20
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0.025
}
},
title: {
text: ''
},
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
yAxis: {
max: 101,
labels: {
formatter: function() {
var value = change[this.value];
return value !== 'undefined' ? value : this.value;
},
style: {
color: '#fff',
font: '12px Nunito'
}
},
title: {
text: null
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#444',
gridLineColor: '#444'
},
credits: {
enabled: false
},
series: [{
name: '',
data: [95,70,80,60,100,75],
color: '#ffd800',
borderColor: 'transparent'
}]
});
};
chart();
});
Set rotation and y value for labels: http://jsfiddle.net/D43q9/2/
xAxis: {
categories: ['Col1','Col2','Col3','Col4','Col5','Col6'],
labels: {
rotation: -90,
y: -20,
style: {
color: '#000',
font: '14px Nunito',
top: '100px'
},
},
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}
I'm using highcharts and i'd like to show a big gauge(500x500px).
Resizing the gauge was quite easy, but the small block with the value in it doesn't resize. How can I make that small block bigger?
Thanks for the help!
jsFiddle: http://jsfiddle.net/AVd8k/
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
width: 500,
height: 500
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
try this by replacing series (whole object) with:
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
enabled: true,
style: {
//fontWeight:'bold',
fontSize: '22px'
}
}
}]
Proof: http://jsfiddle.net/nmQfE/
Of course, you can adjust the font size as you want
It looks like the property you are after is:
plotOptions.gauge.dataLabels.style.fontSize
http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels.style
Try adding something like this to the options:
plotOptions: {
gauge: {
dataLabels: {
style: {
fontSize: '60px'
}
}
}
}
You may need to reposition it using the x and y properties.