I have a webpage with HighCharts and idTabs plugins installed. I just want to show 1 chart at time, so hi got them in multiple tabs. The html code is:
<ul class="idTabs">
<li>Points</li>
<li>Kills and deaths</li>
<li>Damage</li>
<li>Bombs</li>
</ul>
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div>
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>
Until this point is all okey, the charts have their data, and all is okey except one thing, the width. The chart that is showed by default (vpPointsGraph) has the correct width (100% of the div that contains them), but the others take the width that correspond to the width of the monitor, overflowing out of the wrapper div. I think the problem is that they want to get the wrapper div width, but as its hidden they take the whole screen width. ¿Is there anyway to fix this?
Thanks for your answers.
Edit: I solved it, check the next answer for explanation.
Solution: http://jsfiddle.net/5kLdG/
What i have done its just getting the width of the container i want the chart to fit in, and setting it in the highcharts 'width' parameter. I don't know if its the best solution but it worked for me.
//Get wrapper width
var width = $('#wrapper').width()
//Points Graph
var pointsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpPointsGraph',
type: 'line'
},
title: {
text: 'Points'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5,6,7],
reversed: true
},
yAxis: {
title: {
text: 'Points'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Points',
data: [5,6,7,8,3,6,8]
}]
});
//KillsDeaths Graph
var killsDeathsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpKillsDeathsGraph',
type: 'line',
width: width
},
title: {
text: 'Kills and Deaths per match'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5],
reversed: true
},
yAxis: {
title: {
text: 'Number'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Kills',
data: [6,8,2,2,5]
}]
});
Related
I am using Highcharts (Highstock) to render a chart on my page.
I am specifying a max and min value for my axis, but despite this I end up with blank space above my graph:
This is what my options look like currently:
var myChart = new Highcharts.Chart('container', {
rangeSelector:{
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: true,
},
yAxis: [{
opposite: false,
title: {
text: 'Gravity'
},
min: 1,
max: items.options.gravity_max + 0.01
},
{
opposite: true,
title: {
text: 'Temperature (C)'
},
min: items.options.temperature_min - 1,
max: items.options.temperature_max + 1
}],
navigator: {
enabled: false,
},
scrollbar: {
enabled: false
},
series: [{
name: 'Temperature',
data: items.temperature,
dataGrouping: {
enabled: true
},
yAxis: 1,
}, {
name: 'Gravity',
data: items.specific_gravity,
dataGrouping: {
enabled: true
}
},
{
name: 'OG',
data: items.original_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
},
{
name: 'FG',
data: items.final_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
}]
});
Here is a link to a fiddle with a simplified version of the data; http://jsfiddle.net/3eLrn61w/
What is causing that blank space above, and how do I get rid of it?
This is because Highcharts by default will try to start and end an axis on a label. Your current max is 1.071+0.01 (1.081). This is more than the label checkpoint of 1.075, which causes another label to be made.
You can fix this by doing (JSFiddle example):
yAxis: [{
// ...
endOnTick: false
}]
A few other options you might want to evaluate is the matching axis.startOnTick: false, possibly axis.maxPadding: 0 to avoid creating labels that are marginally needed and chart.alignTicks: false to free up the connection between the axis.
An alternative approach will also be to alter the tick positions (axis.tickPositions or axis.tickPositioner) so that they line up better with your min and max values.
Or your third option is to alter your handcoded maximum of the axis (max: items.options.gravity_max + 0.01), so that it does not create such a label gap, f.x. by being max: 1.074.
However, I think your best bet may be with the startOnTick and endOnTick options.
I have a single highstock chart with 2 y-axis - one displaying an area chart and below it a column chart.
I am trying to achieve 2 things (both of which I know are possible, just not sure how to do it).
have a single tooltip, not the 3 that are currently showing up
have that tooltip follow the cursor - either tracking the cursor as
it move across the screen, or appear only over the chart which is
being hovered over (in reality the charts will be larger than the
codepen and require the page to be scrolled).
Appreciate any help!
$cumulative_chart = Highcharts.stockChart('container', {
chart: {
type: 'area',
height: 500
},
plotOptions: {
series: {
//stacking: 'normal',
dataGrouping: {
units: [[
'day',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
}
}
},
yAxis: [{
height: '50%'
}, {
top: '65%',
height: '50%',
offset: 0
}],
xAxis: {
offset: 100
},
credits: {
enabled: false
},
tooltip: {
enabled: true,
shared: true
},
series: [{
type: 'area',
data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
stack: 0,
name: 'chart A',
id: 'area'
},
{
type: 'column',
data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
stack: 1,
name: 'chart B',
yAxis: 1,
id: 'column',
showInLegend: false
}]
});
codepen: https://codepen.io/anon/pen/ZozBZM
The option you are looking for is to add split:false to your tooltip. This causes for the tooltip to center itsself around one of your graphs, instead of hovering over all the graphs in your highstock chart.
A working fiddle is found here
You can find more information in the highcharts API
I am using extjs and highcharts to develop a wind rose chart. I need to display the data as trapezoids with straight edges, rather than the default display of the segments with arcs as delimiters. Here is an image of what I am trying to do
I have been able to integrate the highcharts object into my application using the wrapper provided by JoeKuan
However I am not seeing in the highcharts documentation how I can configure the polar chart columns into straight edged segments as seen in the image..
Here is a fiddle of the polar chart as it works currently.. Fiddle
Highcharts.chart('container', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
},
chart: {
polar: true,
type: 'column'
},
title: {
text: 'Wind rose for South Shore Met Station, Oregon'
},
subtitle: {
text: 'Source: or.water.usgs.gov'
},
pane: {
size: '85%'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
},
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
All help greatly appreciated
Lisa
You want type: 'area' to achieve that visualization.
Highcharts.chart('container', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
},
chart: {
polar: true,
type: 'area'
},
http://jsfiddle.net/0mb1s1jd/1/
I am using highcharts to display charts in my project. Everything is great but when I use zoom buttons the grid lines are dissapearing.
Does anyone know what could be the reason for this?
Below is my code. I did not change much from the examples provided in highcharts.com.
I get the chart with grid lines first without any problem. Only when I use zoom buttons grid lines dissapear. This is not happening with highcharts examples.
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
Edit: I have used the following plug in my website for grouping categories in x-axis. The above problem occurs wherever I used this plugin. Can anybody suggest what I can change to get rid of this problem? Or can anyone suggest an other plugin which gives this functionality?
http://blacklabel.github.io/grouped_categories/
I have used this plugin code in following jsfiddle and could reproduce the issue.
Click on zoom(1y,6m) buttons in this fiddle and observe that grid lines are disappearing
http://jsfiddle.net/92NDX/
I'm having a problem with Highcharts where each bar chart category is way too tall in a horizontal arrangement.
Here is an example:
The code used to generate the chart is as follows:
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'wordchart1',
defaultSeriesType: 'bar'
},
title: {
text: 'Word Frequency Distribution'
},
xAxis: {
categories: ['LIL POP SHOP','SWEET BOX','LITTLE BABY\'S ICE CREAM','SUGAR PHILLY','Please pick one:' ],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Word Frequency Analysis',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Word Frequency Analysis',
data: [89,43,32,24,3 ] }]
});
});
Any idea what may be the problem?
Thanks!
You can also define pointWidth: http://api.highcharts.com/highcharts#plotOptions.bar.pointWidth