Highcharts issue with multiple X axes - highcharts

When I have multiple x axes in a column chart the max value rendered isn't being computed correctly. Also - zooming doesn't work as expected. Here is a jsfiddle showing the issue - https://jsfiddle.net/ermht671/. Does anyone have an example using 2 x axis with Highcharts?
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 1.1
},
xAxis: [{
minRange: 1
}, {
minRange: 1,
linkedTo: 0,
visible: false
}],
series: [{
name: 'series',
data: [
[0.1, 0.2],
[0.7, 0.4],
[1.3, 0.2]
]
}, {
type: 'line',
xAxis: 1,
name: 'MPO',
data: []
}],
chart: {
type: 'column',
zoomType: 'x'
}
});


The solution here is to set chart.alignTicks to false.
Live demo: https://jsfiddle.net/kkulig/3098h8vd/
API reference: https://api.highcharts.com/highcharts/chart.alignTicks

Related

Highstock xAxis gridlines should show only on first series

I have two series, to display both I created two xAxis and two yAxis. I need to show gridlines for both x and yaxis gridlines. But I found that xAxis grid lines are extended to second axis. Here is my code:
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
yAxis: [{
gridLineWidth: 2,
height: '90%'
}, {
top: '100%',
height: 45,
gridLineWidth: 2
}],
xAxis: [{
gridLineWidth: 2
},{
top: '100%',
height: 45,
gridLineWidth: 2
}],
series: [{
name: 'USD to EUR',
data: usdeur
},
{
name: 'USD to EUR',
data: usdeur,
xAxis: 1,
yAxis : 1,
}]
});
Here is a jsFiddle:
https://jsfiddle.net/Subhabrata/85sztqw6/6/
Here is my intention:

Precise Highcharts xrange

Is there a way to make 'xrange' type to render data with an absolute precision that would look like the 'column' type? I would use 'column', but it only uses one 'x' value and I need start and end time for each bar.
I need the bar to stretch over the yAxis from 0 to the y value.
Each bar uses padding and goes beyond the max value in this example:
https://jsfiddle.net/w5mhfp1x/1/
Highcharts.chart('container', {
chart: {
type: 'xrange',
styledMode: true
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime',
tickInterval: 1800000,
dateTimeLabelFormats: {
day: '%H:%M'
},
},
time: {
useUTC: false
},
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
data: data,
}]
});
I think this version is precise, but I need the bar to stretch all the way to the 0:
https://jsfiddle.net/w5mhfp1x/2/
series: [{
name: 'Project 1',
pointPadding: 0,
groupPadding: 0,
borderRadius: 1,
pointWidth: 1,
data: data,
}]

Highcharts polar label textoverflow

When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});

You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels

Highcharts population pyramid opposite x axis not labeled correctly when using axis type 'category'

I adapted the highcharts population pyramid (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/) as follows:
I omitted the option "categories", instead used the option "type: 'category'" and added the categories to the data series. I want to do this because the data comes as a tuple from a file. Unfortunately, the right-hand x-axis is not labeled correctly. I want the right hand x-axis labeled same as the left one. Is this possible without using the option "categories"?
Here is the jsfiddle: https://jsfiddle.net/nehqb9k4/
chart : {
renderTo: 'container',
type: 'bar',
height: 480,
},
xAxis : [{
type: 'category',
reversed: false,
}, { // mirror axis on right side
type: 'category',
opposite: true,
linkedTo: 0,
reversed: false,
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [
['0-4', -2.2],
['5-9', -2.1],
['10-14', -2.2],
['15-19', -2.4],
['20-24', -2.7],
['25-29', -3.0],
['30-34', -3.3],
['35-39', -3.2],
['40-44', -2.9],
['45-49', -3.5],
['50-54', -4.4],
['55-59', -4.1],
['60-64', -3.4],
['65-69', -2.7],
['70-74', -2.3],
['75-79', -2.2],
['80-84', -1.6],
['85-89', -0.6],
['90-94', -0.3],
['95-99', -0.0],
['100 +', -0.0]
]
}, {
name: 'Female',
data: [
['0-4', 2.1],
['5-9', 2.0],
['10-14', 2.1],
['15-19', 2.3],
['20-24', 2.6],
['25-29', 2.9],
['30-34', 3.2],
['35-39', 3.1],
['40-44', 2.9],
['45-49', 3.4],
['50-54', 4.3],
['55-59', 4.0],
['60-64', 3.5],
['65-69', 2.9],
['70-74', 2.5],
['75-79', 2.7],
['80-84', 2.2],
['85-89', 1.1],
['90-94', 0.6],
['95-99', 0.2],
['100 +', 0.0]
]
}]

You need to set the right xAxis for the second series:
series: [{
// xAxis: 0 by default
name: 'Male',
data: [
...
]
}, {
name: 'Female',
xAxis: 1,
data: [
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/70yv1Lae/
API: https://api.highcharts.com/highcharts/series.bar.xAxis

Multiple histograms in highcharts causes an issue with bin spacing on the second histogram?

I'm trying to plot two series of data and their corresponding histograms on the same chart. Unfortunately the result is gaps between the bins of one of the histograms.
Has anyone any idea how to resolve this, bearing in mind that the data is dynamic so I don't want to explicitly set any bin widths etc.
http://jsfiddle.net/uwq9k7Lg/
JS:
Highcharts.chart('container', {
xAxis: [{
}, {
}, {
}],
yAxis: [{
}, {
}],
series: [{
type: 'histogram',
xAxis: 2,
yAxis: 1,
baseSeries: 's1'
}, {
type: 'histogram',
xAxis: 2,
yAxis: 1,
baseSeries: 's2'
}, {
id: 's1',
type: 'scatter',
data: [1540.05,1532.99,1880.28,1477.81,1585.73,1517.52,1986.31,1469.12,1314.68,1769.32,1438.85,1559.51,1712.68,1539.97,1253.89,1830.8,1496.05,1490.26,1671.14,2442.06,1553.05,1493.59,1563.03,1486.62,1802.82,1373.39,1754.35,1525.61,1546.15,1505.9,1457.14,1800.56,1481.7,1349.72,2125.55,1621.02,1689.52,1685.67,1778.98,1698.82,1921.13,1520.81,1566.14,2372.76,1419.91,1796.7,1621.19,1816.31,1528.85,1342.83,2481.26,1694.68,1657.92,1457.89,1414.73,1857.76,1715.27,1530.2,1553.69,2890.06,1632.14,1419.08,1449.88,1414.45,1600.4,1473.22,1745.77,2536.96,1625.38,1788.98,1502.14,1414.55,1491.99,1389.6,1606.47,1865.12,2281.73,1466.92,1485.69,1492.09,2272.98,1656.43,1562.23,2229.11,1732.37,1466.74,1428.72,1209.87,1459.51,1618.47,1720.35,1660.64,1479.19,1425.42,1549.53,1645.3,1602.82,1608.41,1749.81,1714.55,1679.14,1791.71,1490.59,1928.39,1586.32,1494.97,1550.52,2608.26,1512.23,1804.93,1799.76,2493.59,2105.95,1765.73,1176.89,1789.19,1257.6,1701.47,1445.61,2308.24,1644.9,1590.58,2272.31,1449.72,1802.39,1385.58,1402.27,1562.01,1593.6,1585.58,1351.67,1563.42,1689.95,1332.75,2055.39,1567.86,1918.89,1669.67,1521.49,1936.59,1646.44,1735.57,1512.26,1727.84,1398.51,1437.52,1395.86,1704.65,1691.25,2436.58,1474.62,1971.48,1453.26,1274.71,1908.51]
}, {
id: 's2',
xAxis: 1,
type: 'scatter',
data: [1796.39,1819.96,1644.75,1682.29,1664.81,2122.26,1442.42,1748.17,2099.26,1866.1,1466.9,2090.13,1502.34,1760.46,2279.47,1565.06,2104.19,1707.06,1827.82,1989.51,1899.41,1836.86,1633.83,2633.47,1860.75,2582.93,1500.57,2213.11,1417.45,1671.14,2305.97,3002.58,1802.91,1978.37,1914.84,1688.79,1967.32,1622.43,1705.98,1911.45,2040.99,2404.06,1788.33,1540.64,1900.35,1822.32,1995.54,2837.06,1840.97]
}]
});
Thank you!

Just change the xAxis and set borderWith:0
...
xAxis: [{}, {}, {}, {}], // new xAxis
...
{
type: 'histogram',
xAxis: 3, // Use the new added xAxis
yAxis: 1,
baseSeries: 's2',
borderWidth: 0 // Remove the line around the bins
}
Fiddle

Resources