I'm building an Angular app where I use higcharts. The issue I have is the size of the exporting dialog box. I have several graphs on the page, but only one graph has this problem, the dialog box is way too large than the boxes on the others graphs. Below some screenshots so you can observe the difference.
Noramal size:
The large one:
Of course the graphs have the same height and width.
For exporting the graphs, I'm using:
import * as Highcharts from 'highcharts';
import exporting from 'highcharts/modules/exporting';
import exportingData from 'highcharts/modules/export-data';
exporting(Highcharts);
exportingData(Highcharts);
The configuration of all graphs has the same structure like below:
this.chartOptionsAvg = {
colors: ['#0026ff', '#ff0000', '#000000', '#229e00'],
chart: {
type: "scatter",
zoomType: 'x'
},
title: {
enabled: true,
text: '',
verticalAlign: 'top',
align: 'center'
},
xAxis: {
type: 'datetime',
title: {
text: this.translate.instant('map.time')
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
yAxis: {
title: {
text: this.translate.instant('map.graph-measurements-title-yaxis')
},
type: 'logarithmic',
minorTickInterval: 0.1,
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: " V/m",
pointFormat: '<b>{point.x:%d/%m/%Y %H:%M}</b> </br> <b>{point.y}</b>',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
plotOptions: {
series: {
marker: {
radius: 2
}
},
scatter: {
threshold: this.wb_threshold
}
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
exporting: {
enabled: true,
},
series: [
{
name: '100 KHz - 7 GHz',
data: avg_data1
},
{
name: '925 MHz - 960 MHz',
data: avg_data2
},
{
name: '1805 MHz - 1880 MHz',
data: avg_data3
},
{
name: '2110 MHz - 2170 MHz',
data: avg_data4
}
]
}
Have you any idea what is going wrong? Or, there is any way to style the box so I can change the font size maybe? Thank you.
Related
I'm trying to use a stacked bar to represent up/down status over time. For some reason, I'm not able to get the start date to work correctly.
This is what I'm going for, but the start date won't update past epoch start.
http://jsfiddle.net/t5d72ka5/4/
Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor:'transparent',
zoomType:'y'
},
title: {
text: ''
},
xAxis: {
},
yAxis: {
//min: 1502236800000 or min: Date.UTC(2011, 4, 31)
type: 'datetime',
"tickInterval": 86400000,
"minTickInterval": 86400000,
dateTimeLabelFormats: {
day: '%Y %b %e'
},
title: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}, {
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}]
});
I've tried to add the start date in min: 1502236800000 or with UTC and while it sets the start date right, the data doesn't render.
Also tried a few other things with the data values, pointStart, etc. but can't this to work.
I suppose that threshold option is what you're looking for:
plotOptions: {
series: {
stacking: 'normal',
threshold: 1502236800000
}
},
Live demo: http://jsfiddle.net/BlackLabel/jyjfvoac/
API reference: https://api.highcharts.com/highcharts/series.column.threshold
I am using high charts lib to render date time column chart. But x-axis is not taking the exact starting value for the chart. In below example we need to set the bar width before 12th NOV x-axis value
chart: {
type: 'column',
width : 709,
marginTop : 100,
reflow: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ["#00ACE6", "#EA8939", "#2D8093", "#EB5C6A", "#D9A300", "#1B7CDE", "#8D69E0", "#378A4E", "#4F5A65"],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
yAxis: {
allowDecimals: false,
min: 0,
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
animation: false
}
},
series:[{"name":"sent","data":[],"stack":"sent","_colorIndex":0},{"name":" received","data":[],"stack":"received","_colorIndex":1},{"name":"1 sent","data":[[1511136000000,1],[1510531200000,1],[1510444800000,1]],"stack":"sent","_colorIndex":2},{"name":"1 received","data":[],"stack":"received","_colorIndex":3},{"name":" made","data":[[1510531200000,1],[1510444800000,2]],"stack":"sent","_colorIndex":4},{"name":" received","data":[],"stack":"received","_colorIndex":5}], //Server data
loading: {
style: {
marginTop: "-25px"
}
}
});
js fiddle link : http://jsfiddle.net/L94731ge/5/
Could you please help me on this.
adding startOnTick for xAxis maybe correct your chart
xAxis: {
type: 'datetime',
startOnTick:true,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
please check this fiddle
I am trying to represent multi-series events on a timeline using a column chart in Highstock. For some reason the navigator won't show the data from all series in the main chart. It appears to be tied to a single series, but I can't find anything in the API reference that would make it show all the data.
jsFiddle: jsFiddle Example
Highcharts.stockChart configuration:
chart = new Highcharts.StockChart({
chart: {
alignTicks: true,
animation: true,
backgroundColor: '#fff',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1398859200000, 1414753200000);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: [
'#89f1a4',
'#68d9f7',
'#9eb9ef',
'#c49eef'
],
credits: {
enabled: false
},
legend: {
align: 'center',
borderWidth: 0,
enabled: true,
navigation: {
animation: true
},
shadow: false,
verticalAlign: 'top'
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: ''
},
tooltip: {
crosshairs: false,
shared: true
},
navigator: {
height: 40,
margin: 10,
maskFill: 'rgba(233, 233, 233, 0.7)',
outlineWidth: 0,
series: {
type: 'column',
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
max: 24,
min: 0,
ordinal: false
},
xAxis: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%b %Y',
month: '%b %Y',
year: '%Y'
},
labels: {
style: {
color: '#ccc'
}
},
minRange: 604800000,
ordinal: false
},
series: data
});
My question:
How do I get the Navigator to reflect the complete data from the main chart?
As of 2016, this is still unsupported functionality.
I have a chart as below.
http://jsfiddle.net/Mn6sB/4/
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'column',
marginTop:50,
spacingBottom: 5,
marginBottom: 100
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
},
series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
});
});
This is a column graph showing the pass percentage.
I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?
yes this is possible and simple
pass the addl numbers in the series along with data
access them from tool tip as shown below from the formatter
tooltip:{
formatter: function() {
this.point.options.passCount
this.point.options.total
}
}
series:[{
data: [{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
}]
}]
I am using Highstock.js to represent a chart. The problem is that the plotting is showing values little to the right of the actual date on x-axis. The date in the legend matches to the date on x-axis. But the plotting is a bit to the right of that date when zoomed.
please check the fiddle
http://jsfiddle.net/HL7jX/
$('#container').highcharts('StockChart', {
chart: {
//type: 'area',
},
title: {
text: "Weekly Managed Product Fund Flows",
margin:50
},
rangeSelector: {
selected: 0,
align: "left",
buttons: [
{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'},
{
type: 'month',
count: 6,
text: '6m'},
]
},
navigator: {
height: 10
},
xAxis: {
type:'datetime',
maxZoom: 24 * 3600000,
alignTicks : false
},
yAxis:[{
title: {
text: 'Flow US$ mill'
}
}, {
title: {
text: 'AMZ'
},
labels: {
format: '{value}'
},
opposite: true
}],
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
align: "top",
layout: "horizontal",
enabled: true,
verticalAlign: "middle",
x:250,
y:-150
/*labelFormatter: function() {
return this.name + ' (T)';
}*/
},
plotOptions:{
series:{
stacking: 'normal'
},
line:{
marker: {
symbol:"circle",
enabled: true
}
}
},
series: [/*{
type: 'area',
name: 'Total Flows',
data: all,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},*/{
type: 'area',
name: 'Mutual Fund Flows',
data: mf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
}, {
type: 'area',
name: 'ETF Flows',
data: etf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},
{
type: 'line',
name:'Alerian AMZ Index',
yAxis: 1,
data: AMZ_YTD,
tooltip: {
valueDecimals: 2
}
}]
});
This apepars to be a matter of the timestanp passed.
For example: The AMZ Index series, for June 13th - your time stamp is 1371097800000.
This converts to Thu Jun 13 2013 00:30:00 GMT-0400 (Eastern Standard Time)
The tick is set for midnight, the data point value is a half hour later.
If you want the points to match up exactly, make sure the timestamps are set for midnight.
You can also set useUTC false to avoid issues with timezones.
http://api.highcharts.com/highcharts#global.useUTC