We Keep Coding

how do I group data points in apexcharts?

this is the dataset that I have
[1486684800000, 1],
[1486684800001, 1],
[1486684800002, 1],
[1486684800004, 1],
[1486684800005, 1],
[1486684800006, 1],
I want to make an area chart , but if I just use this dataset then I get a straight line
is there a way to round this data to the closest second/minute/hour/day ?
const state = {
series: [
{
name: "series1",
data:
[1486684800000, 1],
[1486684800001, 1],
[1486684800002, 1],
[1486684800004, 1],
[1486684800005, 1],
[1486684800006, 1],
},
],
options: {
chart: {
height: 350,
type: "area",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
},
xaxis: {
type: 'datetime'
}
};

Using Trellis Chart with Stacked Columns in Highcharts

I have a time series data which I want to show as a trellis chart:
Here is a basic version of Trellis Chart from the Highcharts website:
Instead of Erik, Gert, Helge, Torstein, I am working to replace it with groups: Client, DII, FII, PRO.
In this chart below, fruits name is a simple series but here I have a time series data: Fut Index Longs and Fut Index Shorts.
Each of the above groupings( Client, DII...) have their own version of Fut Index Longs and Fut Index Shorts.
I want to show Fut Index Longs, Fut Index Shorts as stacked with the x-axis denoting the different days.
I have tried to use a nested series to accomplish this, but there is no data being displayed. Here is my source:
var charts = [],
$containers = $('#trellis td'),
datasets = [
{
name: 'Client',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'DII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'FII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'PRO',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
}
];
$.each(datasets, function(i, dataset) {
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'bar',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
allowDecimals: false,
title: {
text: null
},
min: 0,
max: 10
},
plotOptions: {
column: {
stacking: 'normal'
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
The link to jsfiddle: http://jsfiddle.net/g6jLhux2/
What am I doing wrong?

In your case, you need to use
series: dataset.data
Also, your x-axis are not datetime but categories, because datetime are supposed to be passed as numbers (milliseconds). You must then use:
xAxis: {
type: 'category'
},
if you want to properly show the data in your charts. See updated jsfiddle
Does it help you ?

After Drilldown, Drillup button overlaps with chart

I have a Highcharts column chart with drilldown and when I do drill down there is a problem. When I drill down the drill up button appears with overlapping with the chart. Is there a way to place this drill up button without overlapping with the chart.
Following is a sample code.
http://jsfiddle.net/yasirunilan/gt8n96ck/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
In following way issue can be reproduced.
Select 2010 from the Legend, then click on republicans to drill down. The chart gets overlapped with button.

To avoid overlapping the button with a chart, you can move drillUpButton outside the plot area:
drillUpButton: {
position: {
x: 0,
y: -35,
}
}
Live demo: http://jsfiddle.net/BlackLabel/v8azqpo3/
API: https://api.highcharts.com/highcharts/drilldown.drillUpButton.position.y

How to add markers to a grouped bar plot in Highcharts?

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}

Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/

how can i plot stacked columns and a single column in highcharts together?(multi Stacked)

my data is something like below.
i want to show them in one single chart in highcharts.
category [jack jane julie john]
i have 3 series of grades like this:
homework [2 1 2 3]
midterm [5 4 6 6]
final exam[10 9 11 10]
i want them to be stacked.
and their ages:
ages [18 22 17 24]
my problem is i know how to stack and know how to plot columns but not they together.

You can set different stacking groups:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['jack', 'jane', 'julie', 'john']
},
yAxis: [{
title: {
text: 'Grades'
}
}, {
title: {
text: 'Age'
},
opposite: true
}],
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [
// first stack
{
data: [2, 1, 2, 3],
stack: 0,
yAxis: 0
}, {
data: [5, 4, 6, 6],
stack: 0,
yAxis: 0
}, {
data: [10, 9, 11, 10],
stack: 0,
yAxis: 0
},
// second stack
{
data: [18, 22, 17, 24],
stack: 1,
yAxis: 1
}]
});
});
http://jsfiddle.net/bhSrh/