Set different pointPadding with highcharts - highcharts

I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?


The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis

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:

Highcharts hide empty bars of categories for multiples series

I'm trying to implement a chart with different series but each series will have a value for different categories independently.
What I want to have:
What I have today:
With the following code:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'a',
data: [267]
},{
name: 't',
data: [0, 21, 400]
},{
name: 'l',
data: [0, 0, 0, 600, 242]
},{
name: 'p',
data: [0, 0, 0, 0, 0, 1000]
}],
});
});
There is free space between bars because series has 0 as values for some category.
I just want to have a "nice" chart with all columns one by one.
Maybe, it's a different way to configure series and categories...

Disable grouping:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/x6758dcq/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping

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,
}]

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

Highcharts issue with multiple X axes

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

Resources