Can we do a bubble chart with highstock ?? if yes i need help please because i do it but it didn't work:
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'bubble',
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
data: [[Date.UTC(1970, 9, 27),97,36,79],
[Date.UTC(1970, 10, 10),94,74,60],
[Date.UTC(1970, 10, 18),68,76,58],
]
}]
});
});
thank you
You must use:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
jsFiddle: http://jsfiddle.net/b826C/7/
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bubble'
},
scrollbar: {
enabled: true
},
navigator:{
enabled:true
},
rangeSelector: {
enabled:true
},
series: [{
name: 'Bubble Highstock',
data: [[Date.UTC(1970, 9, 27),36,79],[Date.UTC(1970, 10, 10),74,60],[Date.UTC(1970, 12, 20),76,58]]
}]
});
});
Related
I have a chart that shows people, a monetary value and a percentage.
I would like to display the percentage as the datalabel instead of the monetary
value.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
So:
Mary would have a datalabel of 65% instead of 4623450,
John would have a datalabel of 26% instead of 1848380,
Jane would have a datalabel of 9% instead of 640170
Is there a way to do that?
See jsfiddle here
SOLVED!
As simple as:
formatter: function() { return this.key;},
Full code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
Updated jsfiddle here
Is there a way to keep the stackLabels on a highcharts stacked column chart, but hide the yAxis?
I have borrowed this fiddle from the HC Author to show the issue. You can toggle the yAxis visibility and this also toggles the stackLabels.
My HighCharts code is:
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
stackLabels: {
enabled: true
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
visible: yVis
});
});
$('#toggle-x').click(function() {
xVis = !xVis;
$('#container').highcharts().xAxis[0].update({
visible: xVis
});
});
});
Can stackLabels be visible with a hidden yAxis?
You can manipulate on elements in yAxis, instead of set the visibility.
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
labels: {
enabled: yVis
},
gridLineWidth: yVis ? 1 : 0,
title:{
enabled: yVis
}
});
});
Example:
http://jsfiddle.net/hg1bcva7/
I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.
Please go through the code below.
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Javascript Code
var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
type: 'column',
renderTo: 'container',
},
title: {
text: 'Weekly Traffic'
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d-%b-%Y}',
rotation:-45,
},
},
yAxis: {
labels:{enabled: false},
title: {
text: ''
},
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+ Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
}
},
plotOptions: {
line: {
enableMouseTracking: false
},
series:{
pointStart: 1444242600000,
pointInterval: 86400000,
shadow:false,
dataLabels:{
enabled:true,
formatter:function()
{
var pcnt = (this.y /maxval ) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
series: [{
name: 'Firefox',
data: [10,56,32,12,64,13,38],
},{
name: 'Chrome',
data: [52,59,10,60,94,3,8],
},{
name: 'Edge',
data: [22,56,20,35,14,73,38],
},{
name: 'Opera',
data: [30,36,80,65,44,53,81],
},{
name: 'Safari',
data: [40,16,50,77,34,33,36],
}],
});
});
});
The working fiddle is given
here.
you need to set utc false in global option of highcharts.
Highcharts.setOptions({
global: {
useUTC: false
}
});
see Updated fiddle here
Check the fiddle - http://jsfiddle.net/4R5HH/209/ - this is just for testing.
I have a target label on y-axis which hides the series tooltip when hover over them.
any solution to this.
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:75,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'},
dashStyle: 'line',
label: {
useHTML: true,
text: '<div class="targetLabel"><span>Target</span><br/><span style="font-weight: bold; padding-top: 5px;">' + '75' + '</span></div>',
align: 'center',
rotation: 0
},
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}]
});
});
});
Got the answer from the Highcharts forum.
So adding the link for reference - http://forum.highcharts.com/highcharts-usage/highcharts-y-axis-plotlines-label-hides-the-tooltip-t31539/
Below is the code fiddle to display highchart. It doesn't show datalabels when chart type is column. when it is 'bar' it shows datalabels.
http://jsfiddle.net/LuxRK/embedded/result/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Nominated', 'Approved','Rejected', 'Pending']
},
yAxis: {
labels:
{
enabled:false
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Employment',
data: [107, 31, 635, 203]
}, {
name: 'Internship',
data: [973, 914, 4054, 732]
}]
});
});
Is there anything which I am missing?
yes when you change the type from 'bar' to 'column', the same has to be done in plotOptions also change 'bar' to 'column' as shown below
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Nominated', 'Approved','Rejected', 'Pending']
},
yAxis: {
labels:
{
enabled:false
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Employment',
data: [107, 31, 635, 203]
}, {
name: 'Internship',
data: [973, 914, 4054, 732]
}]
});
});
updated your fiddle at http://jsfiddle.net/LuxRK/1/