Related
I have been struggling for hours on this and can't seem to figure anything out, pulling my hair out on this one.
here is my data for the chart
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [0.3333333333333333, 0.5, 0.6, 0.5714285714285714]
}],
xaxis: {
type: 'datetime',
categories: [1641535200, 1641621600, 1641708000, 1641794400],
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();
Here is my chart
I can't seem to figure out why the date won't reflect correctly
I have also tried the following code, I have confirmed with a epoch calculator online that this is indeed the dates I am looking for, one time stamp a day with one value per time stamp.
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
markers: {
size: 2,
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [[1641513600, 0.3333333333333333], [1641600000, 0.5], [1641686400, 0.6], [1641772800, 0.5714285714285714]]
}],
xaxis: {
type: 'datetime',
},
tooltip: {
x: {
format: 'dd MMM yyyy'
}
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();
Always good to check if you're looking for epoch or milliseconds, converted the times to * 1000 and fixed my issue.
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
I have a stock price candlestick series And a line series that share yAxis with the candlestick series. By default, the API automatically set chart's yAxis range to the min/max of two series's min/max(candlestick series, line series)
But I want to show the candlestick series more importantly than line chart. So, chart's yAxis min/max should be limited only the candlestick series even if it cut the line series off.
And the yAxis min/max should be adjusted when the chart is scrolled dynamically.
How can I do that?
jsfiddle simple code
var chartData = [
[1473687000000, 102.65, 105.72, 102.53, 105.44],
[1473773400000, 107.51, 108.79, 107.24, 107.95],
[1473859800000, 108.73, 113.03, 108.6, 111.77],
[1473946200000, 113.86, 115.73, 113.49, 115.57]
];
var avgData = [
[1473687000000, 250],
[1473773400000, 300],
[1473859800000, 280],
[1473946200000, 290]
];
$(function() {
Highcharts.stockChart('container', {
// title: {text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {text: 'OHLC'},
height: '100%',
lineWidth: 2,
resize: {
enabled: true
}
}],
plotOptions: {
candlestick: {
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
}, {
name: 'avg',
type: 'line',
data: avgData,
}]
});
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>
In 'afterDrawChartBox' event, you can use setExtremes method with min and max values from candlestick series:
Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
var candlestick = this.series[0];
this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});
Live demo: https://jsfiddle.net/BlackLabel/520km1wv/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I am creating a dynamic updated highstock chart with 2 series but at start one series is rendering in wrong place. And when I resize the selection in navigator the series comes back to its correct place.
Here is the config of highstock:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['day',[1]]
];
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
series1.addPoint([x, y], true, false);
}, 500);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1min'
},
{
count: 3,
type: 'minute',
text: '3min'
}, {
count: 5,
type: 'minute',
text: '5min'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3
},
exporting: {
enabled: false
},
title: {
text: 'Live Chart'
},
yAxis: [
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Line'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [
{
type: 'line',
name: 'OHLC',
data: [[]],
dataGrouping: {
units: groupingUnits
}
},
{
type: 'column',
name: 'Volume',
data: [[]],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
]
});
I have created a fiddle for the same:
https://jsfiddle.net/xu058sgp/23/
I have tried changing the height and top property of yAxis but nothing seems to fix this issue. I am not sure but it can be due to the frequency in which the data is getting updated.
Can someone point me out what I am doing wrong here.
As a workaround you could initialize the series and then remove the points before adding your own points.
Initialization:
series: [{
type: 'line',
name: 'OHLC',
data: [0], //added this 0
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [0], //added this 0
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Then, remove the points before adding new ones:
events: {
load: function () {
// set up the updating of the chart each second
var chart = this
var series = this.series[0];
var series1 = this.series[1];
//Remove 0 data
series.setData([], false); //false to avoid redrawing, so we only redraw once per update
series1.setData([], false);
//update graph
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, false);
series1.addPoint([x, y], false, false);
//redraw graph
chart.redraw();
}, 500);
}
}
Working example: https://jsfiddle.net/ewolden/xu058sgp/46/
I am creating a spiderweb chart following the Highcharts guide. Currently data label are enabled. I want to hide the data on load and only show the data when the user hovers over the line or hovers overs the legend. How can I accomplish this?
Here is a link to my JSFiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Hello World',
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 5,
labels: {
enabled: false,
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [1, 2, 1, 3, 4],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [3, 4, 5, 3, 2],
pointPlacement: 'on'
}]
});
});
HTML:
<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="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
My suggestion is to use the events mouseOver and mouseOut of the series. These will hide and show the data labels. Then using the callback method when constructing the chart you can hide all the data labels by default and add additional events for hovering the legend items, utilizing the functionality of your mouseOver and mouseOut.
To illustrate, in your chart options you would have:
plotOptions: {
series: {
dataLabels: {
enabled: true
},
events: {
mouseOver: function(event) {
// Show all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.show();
});
},
mouseOut: function(event) {
// Hide all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.hide();
});
}
}
}
}
And your callback function would be:
$('#container').highcharts({
// Options...
}, function(chart) {
// Hide data labels by default
$.each(chart.series, function(i, series) {
$.each(series.data, function(i, point){
point.dataLabel.hide();
});
});
// Add events for hovering legend items
$('.highcharts-legend-item').hover(function(e) {
chart.series[$(this).index()].onMouseOver();
},function() {
chart.series[$(this).index()].onMouseOut();
});
});
See this JSFiddle for a complete example.