I'm using the map of Europe from the Highcharts collection to draw choropleths.
It's geat but have an issue with Malta being so small, it is hard for people to see it. So my question is: is there a way to increase the size of just one country on the map? I know that normally, on a map this is done with an inset, but here I would be fine with just increasing the size so it is slightly more visible.
As an example, when I look at this map, for example, Malta (just beneath Sicily at the southern tip of Italy) is very small: https://jsfiddle.net/7j9fq8h3/
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['dk', 0],
['fo', 1],
['hr', 2],
['nl', 3],
['ee', 4],
['bg', 5],
['es', 6],
['it', 7],
['sm', 8],
['va', 9],
['tr', 10],
['mt', 11],
['fr', 12],
['no', 13],
['de', 14],
['ie', 15],
['ua', 16],
['fi', 17],
['se', 18],
['ru', 19],
['gb', 20],
['cy', 21],
['pt', 22],
['gr', 23],
['lt', 24],
['si', 25],
['ba', 26],
['mc', 27],
['al', 28],
['cnm', 29],
['nc', 30],
['rs', 31],
['ro', 32],
['me', 33],
['li', 34],
['at', 35],
['sk', 36],
['hu', 37],
['ad', 38],
['lu', 39],
['ch', 40],
['be', 41],
['kv', 42],
['pl', 43],
['mk', 44],
['lv', 45],
['by', 46],
['is', 47],
['md', 48],
['cz', 49]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/europe'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Europe'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}]
});
Is there any way to do this with HighMaps through the API or would my best approach be to create my own GEOJSON file for example?
Many thanks for any answers,
David
You need to find the required path element and use translate and scale transformation on it. For example:
const malta = chart.series[0].points.find(p => p.name === 'Malta');
const bbox = malta.graphic.getBBox();
const centerX = bbox.width / 2 + bbox.x;
const centerY = bbox.height / 2 + bbox.y;
const scale = 3;
malta.graphic.attr({
transform: 'translate(' +
((1 - scale) * centerX) + ', ' + ((1 - scale) * centerY) +
') scale(' + scale + ')'
}).toFront();
Live demo: https://jsfiddle.net/BlackLabel/ez6kr8a7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Useful thread: Scale path from center
Related
I want to create like below graph. How can I create like this graph?
The biggest value has to be in the middle of xAxis.
You can use xAxis.categories to set the xAxis labels and next you need to define the x value for each point in the data.
Demo: https://jsfiddle.net/BlackLabel/e7d6c2pm/
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
xAxis: {
categories: ['0m', '150m', '250m', '350m', '550m', '700m', '550m', '350m', '150m', '0m'],
plotLines: [{
value: 5,
color: 'red'
}]
},
series: [{
data: [[0.1, 52], [2, 20], [3, 10], [2.5, 8], [2.8, 13]]
}, {
data: [[6, 52], [8, 20], [9, 10], [8.5, 8], [7, 13]]
}]
});
API: https://api.highcharts.com/highcharts/xAxis.categories
I have a second data series that I would like to add to the tooltip on this Highmaps chart. The variable with the second set of data (data2) is in place, but I haven't added the series yet as each time I do it breaks the code. I would like the tooltip to show the data from the first series and then beneath that, show the data from the second series. So it would read something like:
Value
State name: 4.50
Ranking: 3
I think the second series should be added like this:
{name:'Ranking: ',
data: data2
}
but, like I said, when I add that it breaks the code. Beyond that, I can't figure out how to add that additional data to the tooltip, once I get there.
Here's the javascript code:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data2 = [
['mx-3622', 0],
['mx-bc', 1],
['mx-bs', 2],
['mx-so', 3],
['mx-cl', 4],
['mx-na', 5],
['mx-cm', 6],
['mx-qr', 7],
['mx-mx', 8],
['mx-mo', 9],
['mx-df', 10],
['mx-qt', 11],
['mx-tb', 12],
['mx-cs', 13],
['mx-nl', 14],
['mx-si', 15],
['mx-ch', 16],
['mx-ve', 17],
['mx-za', 18],
['mx-ag', 19],
['mx-ja', 20],
['mx-mi', 21],
['mx-oa', 22],
['mx-pu', 23],
['mx-gr', 24],
['mx-tl', 25],
['mx-tm', 26],
['mx-co', 27],
['mx-yu', 28],
['mx-dg', 29],
['mx-gj', 30],
['mx-sl', 31],
['mx-hg', 32]
];
var data = [
['mx-3622', 0.00],
['mx-bc', 5.59],
['mx-bs', 4.05],
['mx-so', 4.77],
['mx-cl', 6.91],
['mx-na', 8.88],
['mx-cm', 8.01],
['mx-qr', 4.87],
['mx-mx', 5.01],
['mx-mo', 0.089],
['mx-df', 8.12],
['mx-qt', 7.32],
['mx-tb', 3.17],
['mx-cs', 1.15],
['mx-nl', 6.88],
['mx-si', 6.64],
['mx-ch', 2.19],
['mx-ve', 0.66],
['mx-za', 8.03],
['mx-ag', 10],
['mx-ja', 3.35],
['mx-mi', 3.91],
['mx-oa', 0.8],
['mx-pu', 1.53],
['mx-gr', 0.0],
['mx-tl', 2.95],
['mx-tm', 5.47],
['mx-co', 9.46],
['mx-yu', 8.62],
['mx-dg', 4.47],
['mx-gj', 8.33],
['mx-sl', 4.35],
['mx-hg', 4.75]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/mx/mx-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Mexico'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Value',
states: {
hover: {
color: '#BADA55'
}
},
}]
});```
Here's a jsfiddle: https://jsfiddle.net/sstoker/81w2revu/15/
Any help would be very much appreciated!!!
You can add the second series in this way:
series: [{
data: data,
name: 'Value',
...
}, {
name: 'Ranking: ',
data: data2
}]
Live demo: https://jsfiddle.net/BlackLabel/amtycfbL/
But I think that a better solution would be to add the additional data field to the first series data and display it in a tooltip by using pointFormat option:
data.forEach(function(el, i) {
el.push(data2[i][1])
});
// Create the chart
Highcharts.mapChart('container', {
...
tooltip: {
pointFormat: 'Value {point.name} Ranking: {point.rank}'
},
series: [{
keys: ['hc-key', 'value', 'rank'],
data: data,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/j809rcva/
API Reference: https://api.highcharts.com/highmaps/series.map.keys
I am currently successfully plotting wind speed and wind direction using a standard line graph for wind speed and a scatter plot for wind direction.
The current windSpeed and windDirection DOM objects look like this:
windDirection = "[202,229,218,208,230]";
windSpeed = "[9,13.4,12,9.7,6.6]";
In reality both those variables hold hundreds, if not thousands, of data points. Each windDirection data point corresponds to the windSpeed data point at the same location, and there are an equal number of windDirection and windSpeed data points in the data set.
The goal is to plot this data onto a wind rose which has the standard N, NNE, NE, ENE, E, ESE, SE, SSE, S, SSW, SW, WSW, W, WNW, NW, NNW wind rose labels. Very much like shown in the Highcharts Polar Wind Rose demo # highcharts.com but utilizing the existing DOM objects rather than creating HTML tables for the data.
Using two data series like shown below did not produce the desired output.
series: [{
data: windDirection
},{
data: windSpeed
}
]
I proceeded to create a data point pair from my data which follows the Highcharts API Reference for series.data example which produced output like this:
data: [[windDirection1,windSpeed1], [windDirection2,windSpeed2], and so on]
That approach failed as well. You can view it at JSFiddle: http://jsfiddle.net/02v3tduo/19/
Ideally I would like to avoid creating a copy of windDirection and windSpeed in the DOM because both data sets are fairly large already.
I did see this question/answer at SO Highcharts: Wind Rose chart with JSON data but I am not sure that the same answer applies in my case. The proposed answer seems very cumbersome when dealing with large data sets as each of the data series would need to be constructed prior to showing the chart.
I don't know how to proceed at this point. I realize that my data probably needs to be binned into 5-10 degree bins so it doesn't look as "scattered" for the lack of a better term. I can deal with the binning after the wind rose works properly.
In general, it's not clear what you are asking for. However I'll try to answer..
First of all, you are creating string instead of array, any specific reason for that? Simply use:
windDirectionJSON = JSON.parse(windDirection);
windSpeedJSON = JSON.parse(windSpeed);
windDataJSON = [];
for (i = 0; i < windDirectionJSON.length; i++) {
windDataJSON.push([ windDirectionJSON[i], windSpeedJSON[i] ]);
}
Now, define array of categories to be displayed on xAxis:
var categories = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
Then, play around with xAxis:
xAxis: {
min: 0,
max: 360, // max = 360degrees
type: "",
tickInterval: 22.5, // show every 16th label
tickmarkPlacement: 'on',
labels: {
formatter: function () {
return categories[this.value / 22.5] + '°'; // return text for label
}
}
},
And working example: http://jsfiddle.net/02v3tduo/21/
Note: it's good idea to sort your data points by wind-direction, to start from 0. Like this: http://jsfiddle.net/02v3tduo/22/
windDataJSON.sort(function(a,b) { return a[0] - b[0]; });
I have a simple way: You can refer to series data
// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.chart('container', {
chart: {
polar: true,
type: 'column'
},
title: {
text: 'Wind rose for South Shore Met Station, Oregon'
},
subtitle: {
text: 'Source: or.water.usgs.gov'
},
pane: {
size: '85%'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on',
type:'category'
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
reversedStacks: false
},
series: [{
"data": [
["ios1", 12],
["ios2", 12],
["ios3", 12],
["ios4", 91],
["ios5", 11],
["ios6", 12],
["ios7", 18],
["ios8",19],
["ios9",12],
["ios10",34],
["ios11",11],
["ios12",71],
["ios13", 66],
["ios14", 21],
],
"type": "column",
"name": "<40G"
}, {
"data": [
["ios1", 12],
["ios2", 33],
["ios3", 12],
["ios4", 10],
["ios5", 11],
["ios6", 13],
["ios7", 9],
["ios8",20],
["ios9",13],
["ios10",74],
["ios11",21],
["ios12",72],
["ios13", 67],
["ios14", 22],
],
"type": "column",
"name": "40-100G,"
}, {
"data": [
["ios1", 12],
["ios2", 34],
["ios3", 23],
["ios4", 11],
["ios5", 31],
["ios6", 14],
["ios7", 10],
["ios8", 21],
["ios9", 14],
["ios10", 21],
["ios11", 21],
["ios12", 73],
["ios13", 68],
["ios14", 23],
],
"type": "column",
"name": "100-500G,"
}, {
"data": [
["ios1", 12],
["ios2", 45],
["ios3", 14],
["ios4", 12],
["ios5", 31],
["ios6", 15],
["ios7", 11],
["ios8", 22],
["ios9", 15],
["ios10", 22],
["ios11", 21],
["ios12", 74],
["ios13", 69],
["ios14", 24],
],
"type": "column",
"name": ">500G"
}],
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
In a stacked chart with a data series in the format of [x, y] there is a larger margin on the left and on the right side. I have created the following jsfiddle to with sample data:
http://jsfiddle.net/ymyrA/4/
The code of the chart is as follows:
$(function () {
var chart = new Highcharts.Chart({
chart: {"renderTo": "container", "type": "column"},
colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a", "#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"],
credits: {"enabled": false},
plotOptions: {"column": {"stacking": "normal"}},
series: [
{"name": "Muster1", "data": [
[11, 1],
[32, 1]
]},
{"name": "Muster2", "data": [
[11, 7],
[12, 4],
[14, 4],
[15, 1],
[16, 1],
[17, 4],
[18, 6],
[19, 2],
[20, 1],
[21, 1],
[22, 1],
[25, 3],
[26, 2],
[28, 1],
[29, 1],
[30, 1]
]},
{"name": "Muster 3", "data": [
[11, 2],
[13, 2],
[15, 1],
[16, 3],
[18, 5],
[19, 11],
[20, 8],
[21, 1],
[23, 3],
[24, 12],
[27, 3],
[28, 4],
[30, 3],
[31, 3],
[33, 3],
[34, 3]
]}
],
title: {"text": null},
xAxis: {"title": {"text": "Week"}},
yAxis: {"title": {"text": "Count"}}
});
});
I have tried with min and max values, categories, etc. and nothing worked out. How can I adjust the chart to be displayed in full size?
I have updated the code and the jsfiddle with the proper sorting. I was using 3.0 and not 3.05 therefore I had no errors in the console. With the latest version I have to issues remaining. One is the above mentioned large margin at the right and left side and the other one is i am unable (even with tickInterval) to have a tick per calendar week. Based on the above mentioned sample the entire chart should have the range from x=11 to x=34 with a tick on each x.
The problem is with calculated pointRange for first series - when you have only two points, for x=11 and x=31 it is assumed that minimum interval between points in that series is 20, so Highcharts will try to set interval something about 20. For such cases you need to use pointRange for example set it to 1, see: http://jsfiddle.net/ymyrA/5/
I'm trying to change yAxis type of a Highcharts 3.0ß bubble chart to logarithmic, but - when it displays something - it displays a single series, and a single bubble... here's an simple example, based on "official" bubble chart demo : http://jsfiddle.net/FtdYf/
$(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false,
type:'logarithmic'
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(69,114,167,0.5)']
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
color: 'rgba(170,70,67,0.5)',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(170,70,67,0.5)']
]
}
}
}]
});
});
So here's my question : is logarithmic axis (X and Y) possible on a bubble chart, and if so, why do it displays just a single series and a single bubble ?
Thanks for help !
You can set tickPositions or create your own tickPositioner. For example: http://jsfiddle.net/Fusher/FtdYf/2/