Highcharts: Tick point and x axis point is far from each other - ruby-on-rails

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/

Related

Higcharts: How to remove the tooltip on the xAxis?

I am having this jsfiddle example, where I need to hide the tooltip that shows on the xAxis. I want to keep the one that shows in the middle.
Here is some part of the related settings:
series: [{
name: 'AAPL Stock Price',
data: data.slice(80, 110),
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
}],
yAxis: {
labels: {
align: 'right',
x: 0,
y: -5
},
opposite: false,
},
This is the one I want to remove:

Setting tooltip.split as a false should fix the issue.
Demo: https://jsfiddle.net/BlackLabel/Le8w0r63/
API: https://api.highcharts.com/highstock/tooltip.split

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

Highcharts combination of line chart and treemap

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.

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

How to draw two lines in HighStocks using candlestick with intraday

I'm trying to draw two lines in HighStocks using JavaScript with their example candlestick with intraday code. For some reason I can't get it to work
I am trying to just generate two extra lines at the end of my candlestick data, here is what i have (testing with just one line but it wont work). You can see the line im trying to put in is called test
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}]
series: [{
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
});
});
});

First of all, you should not add two series arrays in your chart options object. You should use one series array and inside this array add new series object:
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}, {
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
The problem with this case is that you didn't give any x values to your line points, so it will start from 1970 year right now.
You need to add x values so line will start just where you want.
Here you can see an example: http://jsfiddle.net/uj0kzL4c/

Resources