Here is a full link to the project: Electoral Map
I have this Highchart map that I'm trying to convert to React but can't quite figure it out. I tried using React rappers but didn't succeed.
What I have:
JSON data - will be fetched from an API but I have hard-coded them as below.
Jquery functions that maps the data.
Several highcharts imports.
I have not included the path data, too long it wouldnt post.
$(function() {
var json = [{
"name": "Busia",
"registered": "251305",
"UDA": "0",
"Azimio": "0",
"value": "-5"
},{
"name": "Wajir",
"registered": "118091",
"UDA": "8",
"Azimio": "7",
"value": "-2"
}]
function init() {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Azimio',
color: '#0200D0',
y: Number(this.Azimio)
}, {
name: 'UDA',
color: '#C40401',
y: Number(this.UDA)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
// Initiate the chart
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya)</em>'
},
legend: {
title: {
text: 'Political Affiliation'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: 'Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'UDA'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Azimio'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Busia",
"path": "M40,-534,43,-533,46,-532L46,-530L44,-528,44,-525C44,-525,41,-520,41,-520L40,-516,40,-513,41,-511C41,-511,44,-512,43,-509,43,-506,44,-504,44,-504L38,-499,38,-497,44,-495,45,-493,41,-489,41,-486L36,-486L34,-487,30,-488,28,-487,25,-484,22,-484,20,-486,18,-483,16,-481,15,-478,14,-476L14,-473L15,-471,14,-469L12,-469L10,-467,9,-464,10,-459C10,-459,9,-458,7,-457,5,-456,5,-455,5,-455L3,-459,0,-462,0,-465,2,-470,2,-474L2,-478L5,-481,8,-486,10,-491,13,-493L13,-495L12,-499,13,-503,15,-506,15,-510,16,-513C16,-513,19,-516,20,-517,21,-517,24,-519,24,-519L27,-519,28,-519,31,-520L31,-524L32,-526,33,-527,34,-531,35,-532z"
},
}]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
}
init()
});
I've reproduced your example in the working demo that you can find below.
What's important, I didn't use the dialog popup which is a specific jQuery method. Instead, I show a pie chart inside the tooltip, with the use of several point.events such like mouseOver, mouseOut and click as well.
point: {
events: {
//Show the default tooltip
mouseOver: function () {
let point = this;
this.series.chart.update({
tooltip: {
enabled: true,
formatter: function () {
let s = "";
s += `<span style="color:${point.color}">●</span> <span style="font-size: 10px"> ${point.series.name}</span><br/>`;
s += `${point.name}: ${point.value}<br/>`;
return s;
}
}
});
},
//Show the pie chart
click: function () {
let y1 = Number(this.Azimio);
let y2 = Number(this.UDA);
this.series.chart.update({
tooltip: {
useHTML: true,
enabled: true,
formatter: function () {
setTimeout(function () {
Highcharts.chart("chart", {
chart: {
type: "pie"
},
title: {
text: null
},
series: [
{
name: "Votes",
data: [
{
name: "Azimio",
color: "#0200D0",
y: y1
},
{
name: "UDA",
color: "#C40401",
y: y2
}
],
dataLabels: {
format: "<b>{point.name}</b> {point.value:.1f}%"
}
}
]
});
}, 10);
return '<div id="chart" style="width: 300px; height: 150px;"></div>';
}
}
});
},
//Remove the tooltip
mouseOut: function () {
this.series.chart.update({
tooltip: {
enabled: false
}
});
}
}
},
API REference:
https://api.highcharts.com/highmaps/series.map.point.events
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-44tmqt
I have a react chartjs project that uses chartjs-chart-matrix to render a heatmap. My code config looks like so:
const getHeatmapConfig = ({
heatmapData,
getBackgroundColor,
xAxisLabels,
tissues: items,
openMenu,
title
}) => ({
type: 'matrix',
data: {
datasets: [
{
data: heatmapData,
backgroundColor: function (ctx) {
const value = ctx.dataset.data[ctx.dataIndex].v;
return getBackgroundColor(colors, value);
},
}
]
},
options: {
scales: {
x: {
type: 'category',
labels: xAxisLabels,
offset: true,
position: 'bottom',
stacked: true,
ticks: {
autoSkip: true,
maxRotation: 90,
minRotation: 90
},
grid: {
display: false,
drawBorder: false
}
},
y: {
type: 'category',
labels: items,
reverse: false,
offset: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
autoSkip: true
}
}
},
plugins: {
legend: false,
title: {
align: 'center',
font: { size: 15 },
display: true,
text: title
},
tooltip: {
callbacks: {
title() {
return '';
},
}
}
}
}
});
My question is - I want to ensure that their are never more than 50 values and labels on the x axis but there doesn't seem to be a straightforward way of limiting the data like this. Is it possible?
You should limit the array of labels that you pass into your component.
For example: xAxisLabels.slice(0, 50)
We have implemented high chart - Stacked bar as below -
const options = {
chart: {
….
},
title: {
text: ''
},
xAxis: {
visible: false,
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
visible: false,
…….
},
legend: {
itemStyle: {
cursor: 'default',
fontWeight: 'normal'
},
reversed: true
},
plotOptions: {
series: {
cursor: 'default',
stacking: 'normal',
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
},
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
useHTML: true,
enabled: false,
outside: true,
followPointer: true,
crosshairs: false,
},
accessibility: {
…….
},
exporting: {
enabled: false
},
series: props.series
};
It loads fine, also hovering on any of the block does not change opacity for other blocks.
How can we disable hovering on legends below stacked bar?
Example - http://jsfiddle.net/clockworked247/FGmgC/
In above link, basically hover effect on John, Joe, Jane, Janet legends need to be disabled.
Thanks all.
Below answer helped, and worked.
Above link should help. If you are looking for more solutions you can also achieve it using CSS. Make pointer event none for legends like .highcharts-legend-item:{ pointer-events:none; }
I have the following bar chart configuration.
const series = [
{
name: 'Net Profit',
data: [18, 34, 55, 57, 80, 70],
},
];
const options = {
chart: {
type: 'bar',
height: '50px',
toolbar: {
show: false,
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
},
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: false,
},
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '80%',
barHeight: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
width: 0,
colors: ['transparent'],
},
fill: {
opacity: 1,
colors: [
'#000000',
'#B32824',
'#1A73E8',
'#B32824',
'#1A73E8',
'#B32824',
],
type: 'solid',
},
tooltip: {
enabled: false,
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
};
I am getting extra padding at the bottom as below. how can I remove that?
If you don't want to show x-axis and y-axis in your chart, you can simply do
const options = {
chart: {
type: 'bar',
height: '250px',
sparkline: {
enabled: true
}
},
}
The sparkline option will remove all paddings/margins around the chart.
I was facing the same issue, and after reading the doc I found that you should set the value of parentHeightOffset as 0, something like this
var opt1 = {
chart: {
type: 'line',
height: 200,
...
parentHeightOffset: 0,
...
},
...
};
I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/
Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display