Develop Reference

ApexChart fixed labels x asis for rangeBar chart

This is my chart option code:
const options = {
chart: {
type: "rangeBar",
},
series: [
{
data: [
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 12, 30), Date.UTC(2019, 3, 2, 13, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 15, 30), Date.UTC(2019, 3, 2, 16, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 18, 0), Date.UTC(2019, 3, 2, 19, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 22, 0), Date.UTC(2019, 3, 2, 24, 0)],
},
],
},
],
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
type: "datetime",
},
};
And this is the result:
I don't know how to add fixed labels from 00:00 to 24:00 hour format. That's my problem.
I also did this but doesn't work:
xaxis: {
type: "category",
categories: ["00:00", ..., "24:00"]
},
Thanks

Finally i fixed this in this repo:
https://github.com/mortezasabihi/apexchart-timeline

Shared tooltip on multiple charts not formatting correctly

I have multiple highcharts in one container and wanted to use a shared tooltip for it.
I am able to generate a shared tooltip for am not able to format it to how I want.
This is my code:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
// console.log(point.series.userOptions.val);
return `${s}<br/>${point.series.userOptions.val}<br/>${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Now my tooltip looks like this:
x axis value
temp-one
TemperatureIn: y axis value
temp-one
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
temp-two
TemperatureOut: y axis value
How do I format my tooltip to look like:
x axis value
temp-one
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-one and temp-two are values stored in point.series.userOptions.val. I am just not sure how to format my tooltip to look like that.

In the tooltip formatter function, try comparing the series name to that of the previous point and only include it if different, e.g.:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point, i, points) {
// console.log(point.series.userOptions.val);
var series = (i == 0 || point.series.userOptions.val != points[i - 1].series.userOptions.val) ? `${point.series.userOptions.val}<br/>` : '';
return `${s}<br/>${series}${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Highcharts - Force area-step series to overlap columns series at beginning and end of x axis

Codepen: https://codepen.io/Lothain/pen/GRjBOyw
chart: {
type: 'column'
},
title: {
text: 'Job Billings By Month'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
},
yAxis: {
min: 0,
title: {
text: 'Cost in USD'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
area: {
marker: {
enabled: false
},
lineColor: 'rgb(205,70,43)',
fillColor: 'rgb(240,198,189)'
}
},
series: [{
name: 'T&M',
data: [5, 3, 4, 7, 2, 4, 2, 5, 2, 8, 11, 3],
color: 'rgb(208,224,227)'
}, {
name: 'Workorder',
data: [2, 2, 3, 2, 1, 3, 4, 4, 2, 5, 4, 2],
color: 'rgb(207,226,243)'
}, {
name: 'Change Order',
data: [3, 4, 4, 2, 5, 4, 2, 5, 2, 8, 8, 2],
color: 'rgb(201,218,248)'
}, {
name: 'Main Contract',
data: [3, 4, 4, 2, 5, 2, 8, 11, 3, 4, 8, 3],
color: 'rgb(164,194,244)'
}, {
name: 'Projected Billed',
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: 'rgb(255,109,1)'
}, {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
opacity: .5,
data: [4,4, 5, 3, 1, 4, 7, 5, 3, 2, 5, 9]
}]
});
Goal: https://imgur.com/a/Vo7ORj7
I would like the step-area series to extend to the edges of the x-axis, rather than end in the middle of the column they overlap. I'm sure this is possible but I do not know how; I have tried using the series.type.area.step option (center, left, right) to no avail.

You can add one more area series with the same data as the current one, but also with the below options:
series: [..., {
name: 'Cost',
type: 'area',
step: 'center',
color: 'red',
lineWidth: 0,
zIndex: -1,
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}, {
linkedTo: ':previous',
stacking: false,
type: 'area',
step: 'center',
color: 'red',
fillColor: 'transparent',
data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
}]
Live demo: http://jsfiddle.net/BlackLabel/m6gsrn8o/
API Reference: https://api.highcharts.com/highcharts/series.area

Time series horizontal bar chart for running queries visualization

I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.

I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});

Reading external source of data in Highchart 3D bar

This is the code of 3D bar chart where the data is loaded manually but I want to import data from external source.Can you help me in this code. I have also posted the jsfiddle link of this chart below the code.Thanks!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 35,
beta: 15,
depth: 110
}
},
plotOptions: {
bar: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10,
dataLabels:{enabled:true}
}
},
series: [{
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
http://jsfiddle.net/4dccq/481/