Failing to display more ticks in the Highcharts histogram - javascript

I am trying to display more ticks in my histogram. To be more specific, I would want the first tick to be -0.5 and other ticks be spaced 0.05 from each other (-0.5, -0.45, -0.4 ...) so that the last tick is 0.5. Could someone help me with implementing this to my code?
var data = [];
for (var i = 0; i < 1000; i++) {
data.push(Math.random() - 0.49);
}
Highcharts.chart('container', {
title: {
text: 'Return distribution'
},
legend: {
enabled: false
},
xAxis: [
{
title: {
text: 'Asset 1'
},
alignTicks: false,
visible: false
},
{
title: {
text: 'Portfolio returns'
},
alignTicks: false,
opposite: false
}
],
yAxis: [{
title: {
text: 'Asset 2'
},
visible: false
},
{
title: {
text: 'Frequency'
},
opposite: false
}
],
plotOptions: {
histogram: {
// binsWidth: '', takes precende over binsNumber
binsNumber: 20
}
},
series: [{
name: '',
type: 'histogram',
visible: true,
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1,
color: ''
}, {
name: '',
type: 'scatter',
data: data,
id: 's1',
visible: false,
marker: {
radius: 1.5
}
}]
});
If I insert
min: -0.5,
max: 0.5,
tickInterval: 0.05
to the xAxis config. the script won't work
Link to jsfiddle: http://jsfiddle.net/lauri1/5wgfoebs/60/

To show first and last ticks you can set xAxis options startOnTick and endOnTick.
xAxis: [{
startOnTick: true,
endOnTick: true
}
]
In that case, setting xAxis.tickInterval to 0.05 it's working as you wished.
DEMO: http://jsfiddle.net/BlackLabel/y79mor0q/

Related

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

HighCharts yAxis too much space around big numbers

My current chart
Just started using HighCharts. I'm charting a stock price that fluctautes around $1,598 and $1,601 that fluctuates over the course of a day. The changes are all obviously small - but the price is changing - it should not be a straight line. HighCharts seems to just zoom too far out. I've added the startOnTick: false etc. with no luck so far. Is there anything obvious I might be missing?
Options below:
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
If you set the min option for the y-Axis to a number just below your minimum - in your case perhaps 1595, and have startOnTick to false as you've mentioned, that will essentially 'zoom in' on the graph right away for your desired range given the inputs are within that range.
Try to set min value of yAxis.
const options = {
chart: {
height: '150px',
backgroundColor: theme.colors.white02
margin: 0,
spacing: [0, 0, 0, 0]
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
endOnTick: false,
type: 'datetime',
gridLineWidth: 1,
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
startOnTick: false,
minPadding: 10,
maxPadding: 0,
min: 1550
},
title: {
text: null
},
legend: {
enabled: false
},
series: [
{
type: 'areaspline',
data: data[0].data,
}
]
};
options.yAxis.min=1550;
or you can assign minimal value from response array.

Highcharts elements are not aligned

I am trying to split the data contained in a dict into multiple charts. Each chart has two series: column and marker. If represent all the data in a single chart, everything works fine, but if I try to split it, the columns and the marker don't get aligned for some reason
function setup_chart(chart_container){
return new Highcharts.chart(chart_container, {
chart: {
alignTicks: false,
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [],
className: 'chart-axis-title',
title: {
align:'high'
},
offset: -10
},
navigation: {
buttonOptions: {
x: 5,
y: -12
}
},
yAxis:[{
minRange: 1,
max:null,
min:null,
allowDecimals: false,
title: {
text: 'Days'
},
labels:{
formatter:function(){
if(this.value !=0){
return this.value;
}
}
}
},{
tickPositions: [0, 100],
visible: false
}],
tooltip: {
},
exporting: {
scale: 3,
chartOptions: {
legend: {
enabled: true
}
}
},
legend: {
enabled: false
},
series: [{
yAxis: 1,
data:[]
},{
name: 'Days',
data: [],
stickyTracking: true
}]
});
}
I'm passing the data via jinja2 and populate the chart in the following way:
var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
cms_details[key] = {
"data":[],
"left":[],
"right":[],
"cols":[],
"categories":[]
}
}
for(var key in cms_details){
var crtChart = $('#'+key).highcharts();
crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
crtChart.addSeries({
type: 'column',
yAxis: 1,
data: cms_details[key]['cols'],
zIndex: 1,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
crtChart.addSeries({
name: "Study Days",
dataLabels: {
enabled: false,
padding: 10,
borderWidth: 0,
useHTML:false,
formatter:function(){
if(this.y != 0)
return this.y;
}
},
stickyTracking: false,
data: cms_details[key]['data'],
borderWidth: 0,
zIndex: 5,
maxPointWidth: 5,
tooltip:{
followPointer:true
},
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['left'],
zIndex: 1
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['right'],
zIndex: 1
});
crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
}
Here are two pictures, the first one is with assignment without breaking the data into multiple charts, the second one is an attempt to split it :
I've tried to inspect the content of the data and it seems OK in the sense that both have the same coordinates, however they are shifted.
EDIT:
Here's the link to the jsfiddle
I have managed to solve the issue by adding pointPlacement: 0.2 to the series which was displaced.

Highstock granularity of x-axis

My highstock chart chokes on the x-axis labels once I get down any more granular than about 1 day - that is, the data renders properly but the x-axis (time) labels don't seem to update, and become more sparse as I zoom in until they disappear completely. (See images)
Here is a fiddle at a larger time interval where the labels show as expected: http://jsfiddle.net/uhpn8Ljp/2/
Here is a fiddle for the smaller intervals where they don't display: http://jsfiddle.net/4r39730h/1/
I have this as my data setup when the data is received:
return {
chart: {
type: 'areaspline',
zoomType: 'x',
},
credits: {
enabled: false,
},
navigator: {
adaptToUpdatedData: false,
series: {
data: masterSeriesDateValues || dateValues,
},
yAxis: {
gridLineWidth: 0,
startOnTick: false,
endOnTick: false,
minPadding: 0.1,
maxPadding: 0.1,
labels: {
enabled: false,
},
title: {
text: null,
},
tickWidth: 0,
min: 0,
},
},
rangeSelector: {
enabled: true,
inputBoxStyle: { right: '65px', position: 'absolute' },
buttons: [{
type: 'second',
count: 1,
text: '1s',
}, {
type: 'minute',
count: 1,
text: '1min',
}, {
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1d',
}, {
type: 'month',
count: 1,
text: '1m',
}, {
type: 'year',
count: 1,
text: '1y',
}, {
type: 'all',
text: 'All',
}],
selected: rangeSelectorIndex,
inputDateFormat: dateFormat,
inputEditDateFormat: dateFormat,
inputBoxWidth: 170,
},
exporting: {
enabled: false,
},
xAxis: {
min: xAxisStart,
max: xAxisEnd,
minRange: 1, // one millisecond
},
yAxis: {
min: 0,
},
tooltip: {
formatter: function () {
return `${this.points[0].series.name} : ${(display === 'count' ? this.y : formatBytes(this.y))}`;
},
},
series: [{
id: 'itemSize',
name: display === 'count' ? 'Count of Items' : 'Size of Items',
data: dateValues,
dataGrouping: {
enabled: false,
},
}],
};
I also add a few events and labels on render:
xAxis.events = {
afterSetExtremes: this.afterSetExtremes.bind(this),
};
chart.events = { selection: function (ev) {
that.handleRangeSelection.call(this, ev, that);
} };
chartConfig.tooltip = {
formatter: function () {
let label;
if (display === 'count') {
label = this.points[0].series.name + ': ' + this.y;
} else {
label = this.points[0].series.name + ': ' + formatBytes(this.y);
}
return label;
},
};
In a previous implementation of the app, I was seeing smaller and smaller intervals down to milliseconds, and I just copied and pasted the configuration so I don't understand what could be different.

Highstock when multiple lines share a y axis one line is drawn at an offset

I am using Highstock/Highchart and if I draw two lines on a graph, who share a single Y axis, one of the lines isn't displayed on the Y axis properly. It is offset to higher values. For example, a value is 120 but the dot shows up on the 200 line. I would post a pic but I can't yet.
I have tried setting the Y axis max by the highest value but the line goes off the chart because it's still rendered with an offset.
Here is my config for the chart :
$scope.chartConfig = {
options: {
style: {
fontSize: '12px'
},
chart: {
alignTicks: true,
type: 'spline'
},
rangeSelector: {
inputEnabled: true, //$('#container').width() > 480,
selected: 0,
buttons: [{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true
},
tooltip: {
animation: true,
enabled: true,
shadow: true,
shared: false,
useHTML: false,
xDateFormat: '%m/%d/%Y'
},
colors: ['#51324e', '#6e6e6e', '#3d2b3b', '#515151', '#342d3d', '#3e3e3e', '#413451', '#4f4b4b', '#351032', '#3e3e3e'],
plotOptions: {
pointStart: 0,
'line': {
'cursor': 'pointer',
'marker': {
'lineWidth': 1.5,
},
'lineWidth': 1
},
column: {
grouping: true
},
series: {
stacking: 'normal',
}
}
},
xAxis: {
title: {
text: ''
},
},
yAxis: {
//min: 10,
max: null,
title: {
text: ''
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
},
useHighStocks: true,
series: [{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
},
{
//type: 'column',
marker : {
enabled : true,
radius : 4,
fillColor: {},
lineColor: {},
lineWidth: 3,
symbol: 'diamond'
},
name: '',
data: [[
0,0
]],
dataGrouping: { // TODO: delete me?
units: [[
'week', // unit name
[1]
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}
],
title: {
style: {
color: '#51324e'
}
},
credits: {
enabled: false
}
};
In the HTML:
<highchart id="chart" class="hiChart-container" config="chartConfig"></highchart>
And all I change is the data and series name to update the chart...
I am only importing Highstock and using Highchart-ng.
I cannot do var chart = new Chart($scope.chartConfig) because my javascript framework is AngularJS and hence we are using Highchart-ng
How do I adjust the lines to be scaled to the Y axis?

Categories