Develop Reference

Add second series to highchart master detail

I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series

ApexChart 100% touches the bar, though I have offsetY as -30

Iam using Apexchart, If I gave offset value as -30 , which means above the bar. It works fine, until I have the value of 100%. If I have 100% value, data labels touches the bar.
I don't want the datalabels to touch the bar, it should always be above the bar.
chart: {
type: 'column',
background: 'transparent',
toolbar: {
show: false
}
},
colors: [
function ({ value }) {
if (value >= minimumProfilePercentage) {
return theme.palette.warning.main;
}
return theme.palette.info.main;
}
],
xaxis: {
categories: ["A","B","C","D","E","F"],
axisBorder: {
show: false
},
grid: {
show: false
},
plotOptions: {
bar: {
columnWidth: '35%',
dataLabels: {
orientation: 'horizontal',
position: 'top'
}
}
},
tooltip: {
enabled: false
},
dataLabels: {
style: {
colors: [theme.palette.text.primary]
},
formatter(value) {
return `${value}%`;
},
offsetY: -30
},
annotations: {
yaxis: [
{
strokeDashArray: 5,
}
]
}
};
const chartSeries = [
{
data: [100, 20, 30, 40, 50, 60, 97]
}
];

Ran into the same issue. For now I customized the y axis, showing 1 tick more.
In my case:
yaxis: {
tickAmount: 5,
min: 0,
max: 100
}

Highcharts React: Menu button doesn´t change from "view full screen" to "exit full screen" when fullscreen mode is on

We are having some issues when working with highcharts in React. When I change to full screen mode using the menu button I am not able to see the option "Exit from full screen". Instead, the option stills "View in full screen".... However, if I click this option it actually exit full screen mode. I want to be able to see the text "exit full screen". I think the problem is in the event declared on the last lines of this code (exporting.chartOptions.chart).
useEffect(() => {
const chart = chartRef?.current?.chart;
if (!chart?.renderer) return;
setChartOptions(({ chart, credits, legend, xAxis, yAxis, plotOptions, ...currentOptions }) => ({
...currentOptions,
chart: {
...chart,
...chartExtraOptions.current?.chart,
},
credits: {
...credits,
position: {
...credits?.position,
...chartExtraOptions.current?.credits.position,
},
},
legend: {
...legend,
...chartExtraOptions.current?.legend,
},
xAxis: {
...xAxis,
...chartData?.xAxis,
title: { text: undefined },
plotLines: [
{
value: ((chartData?.xAxis?.max ?? 0) + (chartData?.xAxis?.min ?? 0)) / 2,
color: "#84acbc",
},
],
},
yAxis: {
...yAxis,
...chartData?.yAxis,
title: { text: undefined },
plotLines: [
{
value: ((chartData?.yAxis?.max ?? 0) + (chartData?.yAxis?.min ?? 0)) / 2,
color: "#84acbc",
},
],
},
series: chartData?.series,
exporting: {
chartOptions: {
chart: {
events: {
load: function (this) {
chartAxesTitles.current.forEach((element) => {
const { args, attr, css } = element.svg.userOptions;
// Use updated x and y positions
const newArgs = [args[0], element.svg.x, element.svg.y];
createLabel(this.renderer, { args: newArgs, attr, css });
renderWatermarkLabels(this, true);
});
// console.log(this);
},
},
},
},
},
but i have no idea why!!! Any ideas? Thanks!
I add the config for the charts in case it helps:
import { WATERMARK } from "constants/chartCommons";
export const OPTIONS: Highcharts.Options = {
chart: {
className: "IndividualPositioningChart",
type: "scatter",
spacing: [0, 0, 0, 0],
},
credits: {
text: WATERMARK,
href: "#",
position: {
align: "left",
},
style: {
fontSize: "8px",
},
},
title: {
text: undefined,
},
xAxis: {
startOnTick: false,
lineWidth: 0,
tickColor: "transparent",
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
yAxis: {
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
legend: {
verticalAlign: "bottom",
itemWidth: 150,
margin: 20,
},
tooltip: {
snap: 1,
enabled: true,
backgroundColor: "black",
borderWidth: 0,
borderRadius: 2,
padding: 4,
shadow: false,
useHTML: true,
style: {
color: "white",
fontSize: "11px",
},
headerFormat: undefined,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
y: 13,
x: 8,
align: "left",
useHTML: true,
padding: 5,
style: {
fontWeight: "normal",
fontSize: "14px",
color: "#515151",
width: 250,
},
},
stickyTracking: false,
},
},
series: [],
};

Finnaly, I solved my problem removing the load event from the useEffect hook. The load event is declared now in the chart config file and passed as a parameter to the getOption function.
It looks like this:
export const getOption = (load: Highcharts.ChartLoadCallbackFunction): Highcharts.Options => {
return {
chart: {
className: "TeamCompetitiveChart",
spacing: [0, 0, 0, 0],
type: "scatter",
},
credits: {
text: WATERMARK,
href: "#",
position: {
align: "left",
},
style: {
fontSize: "8px",
},
},
title: {
text: undefined,
},
xAxis: {
title: undefined,
startOnTick: false,
lineWidth: 0,
tickColor: "transparent",
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
yAxis: {
title: undefined,
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
legend: {
verticalAlign: "bottom",
itemWidth: 150,
margin: 20,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
marker: {
radius: 8,
},
dataLabels: {
enabled: true,
y: 13,
x: 8,
align: "left",
useHTML: true,
padding: 5,
style: {
fontWeight: "normal",
fontSize: "14px",
color: "#515151",
width: 250,
},
},
stickyTracking: false,
point: {
events: {
click: undefined,
},
},
},
},
series: [],
exporting: {
chartOptions: {
chart: {
events: {
load,
},
},
},
},
};
};
...and this in the hook:
const chartAxesTitles = useRef<IChartAxisTitle[]>([]);
const chartRef = useRef<IRefObjectForHighchartsReact>(null);
const load: Highcharts.ChartLoadCallbackFunction = function (this: Highcharts.Chart) {
chartAxesTitles.current.forEach((element: IChartAxisTitle) => {
const { args, attr, css } = element.svg.userOptions;
// Use updated x and y positions
const newArgs = [args[0], element.svg.x, element.svg.y];
createLabel(this.renderer, { args: newArgs, attr, css });
renderWatermarkLabels(this, true);
});
};
const [chartOptions, setChartOptions] = useState<Highcharts.Options>(getOption(load));
const { renderWatermarkLabels } = useRenderWatermarkLabels(chartData);

Highcharts - chartanimation step by step

Is it possible to render charts and animate them step by step?
Right now I got three area-datasets in my chart which I need to animate step by step. Dataset/area 1 shall start and after this is finished, Dataset/area 2 need to start and then 3.
I cannot find an option for that, is this even possible with Highcharts?
Right now the Animation goes from left,bottom to right,up - is there an option for an animation direction? I want to start the animation from the full width (fully expanded on the xAxis) to go upwarts the yAxis.
My Options:
var $chart = $('#chart');
var chart = new Highcharts.Chart({
chart: {
renderTo: $chart[0],
type: 'area',
style: {
fontFamily: 'Arial, sans-serif'
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
itemMarginBottom: 15,
borderWidth: 0,
itemStyle: {
color: '#9a9a9a',
fontWeight: '300',
fontSize: '16px',
useHTML: true,
}
},
title: false,
xAxis: {
categories: ['0', '5', '10', '15', '20', '25', '30'],
lineColor: '#9a9a9a',
minTickInterval: 5,
title: {
text: 'Years',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
yAxis: {
min: 0,
tickAmount:5,
minorTickInterval: 0,
minorGridLineColor: '#9a9a9a',
gridLineWidth: 1,
maxPadding: 0.1,
title: {
text: 'Eur',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
format: '{value:,.0f}',
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
tooltip: {
backgroundColor: '#FCFFC5'
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.2,
groupPadding: 0,
style: {
color: '#000',
fontSize: '16px',
fontWeight: '300'
}
}
},
series: [
{
name: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 3000
},
data: [1042,
2128,
3259,
4438,
5666,
6946,
7652
]
},
{
name: '1',
legendIndex: 1,
color: '#24356d',
animation: {
duration: 2000
},
data: [1024,2073,3146,
4246,
5372,
6525,
7705
]
},
{
name: 'Eingezahlte Rate',
legendIndex: 0,
color: '#9a9a9a',
animation: {
duration: 1000
},
data: [
1000,
2000,
3000,
4000,
5000,
6000,
7000
]
}
]
});`
Thanks

You can use series.afterAnimate event in which you can fire animation for another series.
In your first series set afterAnimate like this:
events: {
afterAnimate: function () {
this.chart.get('1').update({
visible: true,
animation: {
duration: 2000
},
events: {
afterAnimate: function () {
this.chart.get('2').update({
visible: true,
animation: {
duration: 3000
}
})
}
}
})
}
},
For the other series, initially you can disable animation or/and set their visibility to false:
series: [{
name: '2',
id: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 0
},
visible: false,
To change the direction of the animation you need to wrap series.animate
method and change how the clipping rect is animated.
(function(H) {
H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey,
newH;
if (init) {
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX + 99
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
});
})(Highcharts)
example: http://jsfiddle.net/0esjvmgL/

Highcharts area chart curves to sharp

I just started using highcharts and I would like for my chart to display as something like the first image below, instead of the second image.
What I'd Like
What I have
Here is the code for what I have currently:
chart = new Highcharts.stockChart($('#' + tab + ' .chart')[0], {
chart: {
type: 'areaspline',
spacing: [10, 10, 15, 10],
events: {
load: function() {
setTimeout(function() {
interval = setInterval(function() {
requestData(asset, name)
}, 1000);
}, 1000);
}
},
},
rangeSelector: {
enabled: !1
},
navigator: {
enabled: false
},
title: {
text: name
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%d/%m",
week: "%Y<br/>%d-%m",
month: "%m-%Y",
year: "%Y"
}
//tickPixelInterval: 3600
},
yAxis: {
allowDecimals: true,
title: {
text: 'Values'
},
labels: {
style: {
backgroundColor: "#282828"
},
y: 12,
zIndex: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, countDecimals(this.value))
}
},
opposite: false,
plotLines: [{
value: 0,
width: 1,
dashStyle: 'longdashdot',
color: '#2D2E2F'
}]
},
series: [{
name: 'Price',
dataGrouping: {
enabled: !1,
groupPixelWidth: 1
},
animation: !1,
threshold: null,
//color: '#2D2E2F',
data: []
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
});
PS: The data from both charts are almost the same.
Thanks.