Highcharts combination of line chart and treemap - highcharts

I need to make a combination of draggable line chart and treemap.
See here: JSFiddle example
Highcharts.chart('container', {
series: [{
type: "treemap",
data: [
{id: "NS",name: 'NS_area', value:5},
// ...
}
},{
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
}]
});
can I display x,y axis when using treemap? Do you have other idea how to combine both charts?

One workaround that might work for you is adding an additional axis and simply linking it to the original one.
For example, creating one "duplicate" x-axis and y-axis:
xAxis: [{
},{
linkedTo: 0
}],
yAxis: [{
}, {
linkedTo: 0
}]
See this JSFiddle demonstration of it in use. This makes the axis mimic the look you originally had.
If you want the line chart to be completely independent of the original axis, you could just do the following:
series: [{
// ...
}, {
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
yAxis: 1,
xAxis: 1,
// ...
}],
xAxis: [{
},{
}],
yAxis: [{
}, {
}],
See this JSFiddle demonstration of it in use. This works as a completely separate axis.

Related

Highchart line chart with category do not occupy full width

I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement

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: Tick point and x axis point is far from each other

One issue is that the first point of line is at 15th jul but 15th july is not showing on x axis, it shows when you hover on it, and the first point of column is on 8th july.
Second issue is both points (of bar and line) have distance, it should be align opposite to each other.
$('#container').highcharts({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime'
}],
series: [{field_name: "ordered_revenue", type: "spline", name: "Grouped ordered_revenue", connectNulls: true, data: [[1531681200000, 566.76],
[1531767600000, 604.26],
[1531854000000, 742.78],
[1531940400000, 545.55],
[1532026800000, 252.16],
[1532113200000, 468.67],
[1532199600000, 426.68]]}, {field_name: "ordered_revenue", type: "column", name: "Grouped ordered_revenue Prior Priod", connectNulls: true, xAxis: 1, data: [[1531681200000, 510.61],
[1531767600000, 346.74],
[1531854000000, 327.57],
[1531940400000, 269.34],
[1532026800000, 372.34],
[1532113200000, 231.38],
[1532199600000, 442.09]]}]
});
Column series causes another way of rendering xAxis. You need to set pointPlacement on the column series to on.
series: [{
field_name: "ordered_revenue",
type: "spline",
name: "Grouped ordered_revenue",
connectNulls: true,
data: [
[1531681200000, 566.76],
[1531767600000, 604.26],
[1531854000000, 742.78],
[1531940400000, 545.55],
[1532026800000, 252.16],
[1532113200000, 468.67],
[1532199600000, 426.68]
]
}, {
field_name: "ordered_revenue",
type: "column",
pointPlacement: 'on',
name: "Grouped ordered_revenue Prior Priod",
connectNulls: true,
xAxis: 1,
data: [
[1531681200000, 510.61],
[1531767600000, 346.74],
[1531854000000, 327.57],
[1531940400000, 269.34],
[1532026800000, 372.34],
[1532113200000, 231.38],
[1532199600000, 442.09]
]
}]
API Reference: https://api.highcharts.com/highcharts/series.column.pointPlacement
Live demo: http://jsfiddle.net/BlackLabel/qp3wcgxo/

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

highcharts stacked area with irregular x-intervals

After a couple of weeks working with Highcharts, we are facing problems to generate charts that fit to out data structure. Would be nice if somebody can give us a hint.
Here is the problem:
We want to create a stacked area chart for 2 or more series.
Since our x-values have irregular intervals we tried to set up value pairs for each data point [x,y]
However, the area chart does not stack our y-values. Any suggestions?
Here is an example of our problem: link to jsFiddle
Thanks for your help!
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Irregular point intervalls stacked area'
},
yAxis: {
title: {
text: 'value'
}
},
plotOptions: {
area: {
dataLabels: {
enabled: true
},
stacked: 'normal'
}
},
series: [{
name: 'test 1',
data: [[0, 7.0], [1, 6.9], [1.5, 9.5], [3, 14.5]]
}, {
name: 'test 2',
data: [[0, 3.9],[1, 4.2], [1.5, 5.7], [3, 8.5]]
}]
});
});
you have to use stacking not stacked in plotOptions-> area
stacking: 'normal',
updated you fiddle at http://jsfiddle.net/FX7XE/2/
hope this will be useful for you

Resources