Related
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
Is it possible to have the same feature that you get in Apache echarts. Refer to the following Apache echarts example in JS snippet, where the legend given by type:"piecewise" allows the user to hide on click particular color values. How can i get the same thing in Highcharts. The usual heatmap shows a bar legend, but I want the conventional legend that you see in line or bar charts. Thanks.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// prettier-ignore
const hours = [
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'
];
// prettier-ignore
const days = [
'Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
];
// prettier-ignore
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
type: 'piecewise'
},
series: [
{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Yes, it is possible with Highcharts. You need to only use data-classes in color-axis settings.
colorAxis: {
dataClasses: [{
from: 0,
to: 50
}, {
...
}, {
...
}],
...
}
Live demo: https://jsfiddle.net/BlackLabel/vk0t7g6n/
API Reference: https://api.highcharts.com/highcharts/colorAxis
Docs: https://www.highcharts.com/docs/maps/color-axis
Following the demo example for the heatmap chart,
jsfiddle demo
the series name doesnt show up for me, what am i missing?
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
After consulting the topic in comments below the question, you can set your series name as Axis.title inside of Chart.events.load event function, using setTitle() method. Then it should be dynamically set at every chart load basing on your current series name. Here is the code which shows how to achieve it:
chart: {
events: {
load() {
var chart = this
var seriesName = chart.series[0].name
chart.xAxis[0].setTitle({ text: seriesName, style: { fontWeight: 'bold' } })
}
}
}
Live example: https://jsfiddle.net/9rcsqyov/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#setTitle
I am trying to adapt a highcharts heatmap from raw coding to the Yii2 plugin by Milos Schuman. Area and line charts are working but there is not an example of using heatmap and I tried almost everything.
This is the code as shown in highcharts demo:
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
And a sample of Area chart using the Yii2 widget:
use miloschuman\highcharts\Highcharts;
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Fruit Consumption'],
'xAxis' => [
'categories' => ['Apples', 'Bananas', 'Oranges']
],
'yAxis' => [
'title' => ['text' => 'Fruit eaten']
],
'series' => [
['name' => 'Jane', 'data' => [1, 0, 4]],
['name' => 'John', 'data' => [5, 7, 3]]
]
]
]);
The problem basically is that in case of a heatmap chart it is required to specify that the heatmap module is needed before the options description like that:
'scripts' => [
'modules/heatmap', // adds heatmap support
],
That is a working sample based on the highcharts demo:
$heatmap_options = [
'scripts' => [
'modules/heatmap', // adds heatmap support
],
'options' => [
'title' => ['text' => 'Sales per employee per weekday'],
'chart' => [
'type' => 'heatmap'
],
'xAxis' => [
'categories' =>['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
],
'yAxis' => [
'categories' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
],
'colorAxis' =>[
],
'series' => [[
'name' => 'Sales per employee',
'borderWidth' => 1,
'data' => [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117],
[1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114],
[3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12],
[5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82],
[7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31],
[9, 3, 48], [9, 4, 91]],
'dataLabels' => [
'enabled' => true,
'color' => '#000000'
]
]
]
]
];
echo Highcharts::widget($heatmap_options);
this is the code:
$(function () {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.2)' },
back: { size: 1, color: 'rgba(0,0,0,0.4)' },
side: { size: 8, color: 'rgba(0,0,0,0.6)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
reversed: true,
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
colorByPoint: true,
data: [[8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
},
{ type: "column",
depth: 250,
data: [0]
}],
plotOptions: {
series: {
pointWidth: 200
}
},
});
and this is jsfiddle:
http://jsfiddle.net/Rodrigoson6/2yfebsgn/
I want to have a chart that reminds the very 3d. I can do only with colors and gradients. It would be very important to add another properties at the "frame" (on top), because in that way i coulde use other colors and gradients...
But is impossible.
The yAxis is reversed, because in future on bottom (that with yaxis reversed is at the top) i will add an image...
But on bottom there will be nothing....
So, i would like to add a column in my scatter chart. But i want that the only column must be at the bottom e in the chart (now the column is at the top and half outside of chart)...
Is possible ?
Maybe another solution could be to add a rect ? but the problem is that my chart is scatter type and draggable.
Thanks