Currently polar chart in highchart is placing the points in fix interval set by pointInterval. Is it possible to enter coordinates in series by length and angle (or x and y)?
i.e. instead of having:
series: [
{
type: "line",
data: [1,5,3,2,1],
pointInterval: 45,
}
],
I'd like to have:
series: [
{
type: "line",
data: [[0,1],[40,5],[60,3],[150,2],[220,1]]
}
],
Where the first item is the angle and the second item is length.
Related
I am using advanced accessible high charts and I need to be able to increase and decrease the height of gridlines based on the data points for a particular series. If the data points for a particular series is less than 10 I want the height of the gridline to be 30 px else if the data points is between 10 and 15 I want the height to be 50px if the data points are more than 20 i will need the gridline height to be 100px
The only solution that came to my mind is to attach each series into an independent axis which allows setting each axis height (in percentage or pixel value).
xAxis: [{
height: '30%',
}, {
height: '60%',
top: '30%',
offset: 0
}, {
top: '80%',
height: '10%',
offset: 0
}],
series: [{
data: [2, 3, 4],
xAxis: 0
}, {
data: [10, 12],
xAxis: 1
}, {
data: [10, 12],
xAxis: 2
}]
Demo: https://jsfiddle.net/BlackLabel/8pu13s7d/
API: https://api.highcharts.com/highcharts/yAxis.height
API: https://api.highcharts.com/highcharts/yAxis.top
I am trying to set customise y-Axis in highcharts, where i have data count in two digits and more than 6 digits too, i have set y-axis tickPosition according to my need like [0,50,500,5000,50000,500000]. But i want the spacing between my grids equal.
My Result
Highcharts.chart('container', {
title: {
text: 'Custom tick positions'
},
subtitle: {
text: 'through axis.tickPositions and axis.tickPositioner'
},
xAxis: {
},
yAxis: {
tickPositions: [0, 50, 500, 5000,50000,500000]
},
series: [{
data: [
[0, 5000],
[1, 422102],
[2, 93210],
[3, 45111],
[4, 12]
]
}]
});
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/tickpositions-tickpositioner/
In above link example, I dont want that extra spacing after 2 in x axis, i want those space to be equal. in my case it will also be helpful in y-axis.
You need to use yAxis.type and convert the tick into a log scale:
yAxis: {
type: 'logarithmic',
tickPositions: [0,50,500,5000,50000,500000].map((v) => Math.log10(v)) // Used to convert the numbers in logarithmic scale
},
Fiddle
Is it possible to create a Highcharts chart with splines in percentages, but WITHOUT them stacking?
I would like to display lines in a relative view, but I would like them to be crossing when their percentages changes.
Basically, like this: http://jsfiddle.net/dp6pjeo9/5/
plotOptions: {
series: {
pointStart: 2010,
stacking: 'percent'
}
},
but without the lines 'stacking' behavior. Stacking is really inconvenient for lines because it is hard to tell whether they are 'absolute' values or 'stacked' values.
See here, the top line should be under then the black line in 2010.
You need to process you data before you put them in the chart config.
Calculate sums:
var data = [3, 5, 10, 15,25]
var data2 = [25,15, 10, 5, 0]
var sum = data.map((v, i) => v + data2[i]) // grab sums
Calculate percentages and set data:
series: [{
name: 'Installation',
data: data.map((v, i) => ({
y: v / sum[i] * 100,
absoluteY: v
}))
}, {
name: 'Manufacturing',
data: data2.map((v, i) => ({
y: v / sum[i] * 100,
absoluteY: v
}))
}]
Change tooltip's pointFormat so it shows absolute y value instead of percentage value
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>'
},
example: http://jsfiddle.net/dp6pjeo9/6/
I got a donut chart and want to display hours and minutes. Using highcharts pie chart with constant visible drilldown data this leads me to a big problem, please see the picture first:
The inner blue slice has the value 10.40, which stands for 10:40 as a time. The two outer slices have the values 5.50 and 4.50, which, summed up as hours and minutes, results in 10.40, but highcharts doesn't know it's a time format, so it sums that up as 10.00 which perfectly shows my problem.
I tried setting the yAxis type to datetime
type: 'datetime',
which does not change anything so far. I found other entries like Pass time values to Highcharts Column chart, which sadly left me clueless.
Did I miss something? Glad for any help.
An minimal example solution, using millisecond values to only display hours and minutes (JSFiddle):
var m = 1000 * 60;
var h = m * 60;
$('#container').highcharts({
chart: {
type: 'pie'
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%H:%M', new Date(this.y));
}
},
series: [{
name: 'Inner',
data: [
{ name: 'A', y: (10 * h) + (40 * m), color: 'blue' },
{ name: 'B', y: (3 * h), color: 'red' },
],
size: '60%'
}, {
name: 'Outer',
data: [
{ name: 'A1', y: (5 * h) + (50 * m), color: 'blue' },
{ name: 'A2', y: (4 * h) + (50 * m), color: 'blue' },
{ name: 'B1', y: (3 * h), color: 'red' },
],
size: '100%',
innerSize: '60%'
}]
});
Here we just operate with time going from 0 and out. The tooltip is used to format the values in a readable format.
See this more elaborate JSFiddle demonstration using some of the pie-donut demo code to color the slices like your example picture.
I have a chart at this JSFiddle to demonstrate a problem where our charts are not respecting the y-axis tick interval for large values:
http://jsfiddle.net/z2cDu/1/
var plots = {"usBytePlots":[[1362009600000,143663192997],[1362096000000,110184848742],[1362182400000,97694974247],[1362268800000,90764690805],[1362355200000,112436517747],[1362441600000,113563368701],[1362528000000,139579327454],[1362614400000,118406594506],[1362700800000,125366899935],[1362787200000,134189435596],[1362873600000,132873135854],[1362960000000,121002328604],[1363046400000,123138222001],[1363132800000,115667785553],[1363219200000,103746172138],[1363305600000,108602633473],[1363392000000,89133998142],[1363478400000,92170701458],[1363564800000,86696922873],[1363651200000,80980159054],[1363737600000,97604615694],[1363824000000,108011666339],[1363910400000,124419138381],[1363996800000,121704988344],[1364083200000,124337959109],[1364169600000,137495512348],[1364256000000,136017103319],[1364342400000,60867510427]],"dsBytePlots":[[1362009600000,1734982247336],[1362096000000,1471928923201],[1362182400000,1453869593201],[1362268800000,1411787942581],[1362355200000,1460252447519],[1362441600000,1595590020177],[1362528000000,1658007074783],[1362614400000,1411941908699],[1362700800000,1447659369450],[1362787200000,1643008799861],[1362873600000,1792357973023],[1362960000000,1575173242169],[1363046400000,1565139003978],[1363132800000,1549211975554],[1363219200000,1438411448469],[1363305600000,1380445413578],[1363392000000,1298319283929],[1363478400000,1194578344720],[1363564800000,1211409679299],[1363651200000,1142416351471],[1363737600000,1223822672626],[1363824000000,1267692136487],[1363910400000,1384335759541],[1363996800000,1577205919828],[1364083200000,1675715948928],[1364169600000,1517593781592],[1364256000000,1562183018457],[1364342400000,681007264598]],"aggregatedTotalBytes":43476367948896,"aggregatedUsBytes":3150320403841,"aggregatedDsBytes":40326047545055,"maxTotalBytes":328186292129,"maxTotalBitsPerSecond":30387619.641574074}
;
$('#container').highcharts({
yAxis: {
tickInterval: 53687091200 // 500 gigabytes. Maximum y-axis value is approx 1.8TB
},
series : [
{
color: 'rgba(80, 180, 77, 0.7)',
type: 'areaspline',
name : 'Downstream',
data : plots.dsBytePlots,
total: plots.aggregatedDsBytes
},
{
color: 'rgba(33, 143, 197, 0.7)',
type: 'areaspline',
name : 'Upstream',
data : plots.usBytePlots,
total: plots.aggregatedUsBytes
}]
});
In this example we are charting bandwidth utilization in bytes. The chart has a maximum value of about 1.8TB. We set the y-axis tick interval to exactly 500GB but the rendered y-axis ticks don't make any sense for the given interval.
You can set max value or use tickPositioner.
Ref:
- http://api.highcharts.com/highcharts#yAxis.max
- http://api.highcharts.com/highcharts#yAxis.tickPositioner