Develop Reference

javascript Highcharts over option change backgroung color

I have 5 days trying to change color zone, this's code:
[https://jsfiddle.net/gerarca/7sg1c4nz/187/][1]
I just want to change backgroung color on over event, like:
enter image description here
If I put the mouse pointer over a department, an area should be highlighted in red, the area to which the department belongs.
I tried to do it using multiple overs, but this property can only be used once and don't work.
where I'm wrong??

Each department in your example refers to one point in the series. If you want to change the colour of the hovered point, you can use i.e point.events to achieve that:
point: {
events: {
mouseOver: function() {
originalColor = this.color;
this.update({
color: '#5F9EA0'
});
},
mouseOut: function() {
this.update({
color: originalColor
});
}
}
}
But if you want to change the colour of the zones and enable the dataLabels on hover, as like image shows, it would be best to create zones as a separate series. Then you will be able to easily update these series after mouseOver event.
Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
color: 'white',
format: '{point.name}'
},
color: 'grey',
allAreas: false,
states: {
hover: {
color: 'red'
}
},
events: {
mouseOver: function() {
this.update({
color: 'red',
dataLabels: {
enabled: true
}
}, false)
chart.update({}, true, false, false);
},
mouseOut: function() {
this.update({
color: 'grey',
dataLabels: {
enabled: false
}
}, false)
chart.update({}, true, false, false);
}
}
},
},
series: [{
data: zone1,
name: 'zone 1'
},
{
data: zone2,
name: 'zone 2'
},
{
data: zone3,
name: 'zone 3'
},
{
data: zone4,
name: 'zone 4'
},
{
data: zone5,
name: 'zone 5'
}
]
});
Demo:
https://jsfiddle.net/BlackLabel/296ujzf4/
API References:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/class-reference/Highcharts.Series#update

Add this to your css file:
.highcharts-series-group path:hover {
fill: rgba(249, 209, 12, 0.87); // or whatever color
}

Layer in Leaflet JS doesnt show again when check the control layer

I use the leaflet control layer to show up and remove the layer when I didn't wanna show the layer. when I uncheck my control layer it worked properly. the layer can disappear, but when I check again the control layer, the layer didn't show again. but there is no error in the console .
var pieChartGroup = L.featureGroup().addTo(map);
vals.forEach(val => {
var pictures = L.marker(val.location, {
icon: L.divIcon({
className: 'leaflet-echart-icon',
iconSize: [160, 160],
html: '<div id="marker' + val.id + '" style="width: 160px; height: 160px; position: relative; background-color: transparent;"></div>'
})
}).addTo(pieChartGroup);
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('marker' + val.id));
// Specify chart configuration items and data
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: val.nama,
type: 'pie',
radius: ['10', '25'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '18',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: val.MB,
name: 'Masih Bersekolah'
}, {
value: val.TBL,
name: 'Tidak Bersekolah Lagi'
}, {
value: val.TBPS,
name: 'Tidak/Belum Pernah Bersekolah'
}]
}]
};
// Use the configuration items and data you just specified to display the chart.
myChart.setOption(option);
}
)
var baseLayers = {
"OpenStreetMap": LayerKita,
"OpenCycleMap": L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'),
"Outdoors": L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')
};
var overlays = {
"Bersekolah" : pieChartGroup
};
L.control.layers(baseLayers, overlays).addTo(map);

How to add labels on top of the chart bar with Chart.js 2

I need to apply labels on top of chart following the columns just like the image (the numbers aside the text 'Resultado mês'):
Image of the desired result
Some help please?
The page is bellow (the labels need to go before the legends).
I've provided a HTML/CSS solution temporarily in the page bellow , but I'm waiting for the real solution:
http://www.pdagencia.com.br/porto/pages/10.3%20-%20consultar-dados-bancarios-01_v2.html#tab3
window.onload = function() {
var ctx = document.getElementById('ps-chart').getContext('2d');
var data = {
labels: ["Jan/18", "Fev/18", "Mar/18", "Abr/18", "Mai/18", "Jun/18", "Jul/18", "Ago/18", "Set/18", "Out/18", "Nov/18", "Dez/18"],
datasets: [{
label: "Entradas",
data: [650, 590, 800, 810, 560, 550, 400, 800, 810, 560, 550, 400],
backgroundColor: '#33bfff'
},
{
label: "Saídas",
data: [-280, -480, -400, -190, -860, -270, -900, -400, -190, -860, -270, -900],
backgroundColor: '#E75A5B'
}
]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: false,
plugins: {
datalabels: {
formatter: function(value, context) {
return context.dataset.data[context.dataIndex].toLocaleString('pt-BR', {
style: 'currency',
currency: 'BRL'
});
}
}
},
legend: {
display: true,
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
ticks: {
display: false
}
}],
xAxes: [{
stacked: true,
barPercentage: 1.2,
gridLines: {
display: false
}
}]
}
}
});
}
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.2/Chart.bundle.min.js"></script>
<script src="https://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.3.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="ps-chart" style="width:100%"></canvas>

I am new to the chart js and javascript.
As I have faced the same problem, I wanted to display the sum of two values into the label,
I got some solution for the same as below.
Maybe it can help you.
Check it out:
http://www.chartjs.org/samples/latest/tooltips/callbacks.html
tooltips: {
mode: 'index',
callbacks: {
// Use the footer callback to display the sum of the items
showing in the tooltip
footer: function(tooltipItems, data) {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
},
},
footerFontStyle: 'normal'
},
hover: {
mode: 'index',
intersect: true
},

ChartJS Doughnout Chart Pie Offset on Hover

I have this:
Is it possible to animate one section of this chart, a Pie, on hover to make it grow, as in offset by either giving it padding or a different height?
I think this should be possible because on their site it says " Animate everything!", but haven't had any luck yet. Tried using events but not working.
// Doughnut chart
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [11, 47, 53],
backgroundColor: ['rgb(137, 207, 191)', 'rgb(140, 187, 206)', 'rgb(144, 156, 209)']
}],
labels: [
'Elementary',
'Middle School',
'High School'
],
},
options: {
cutoutPercentage: 60,
title: {
display: true,
text: 'Grade',
position: 'top',
fontFamily: 'sans-serif',
fontSize: 18,
fontColor: 'rgb(97, 98, 116)',
padding: '20'
},
layout: {
padding: {
top: 20,
}
},
legend: {
display: true,
},
onHover: stuff,
slices: {
1: {
offset: .5
}
}
}
});
function stuff(e) {
var activePoints = myDoughnutChart.getElementsAtEvent(e);
console.log(activePoints);
}
Thanks for any help.

Add this code in update function of doughnut
var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
if (index == doughnutIndex) {
innerRadius = innerRadius + 10;
}
And add a new function setHoverStyle
setHoverStyle: function(arc) {
doughnutIndex = arc._index;
this.update();
},

If what you are wanting is for the section to move outward on hover, that is done with simply setting hoverOffset with a number. See this example and documentation here.

Highcharts bar chart wont animate

Not sure why because I have done it in the past, but I have a Highcharts bar chart and it won't animate. This is the declaration of the chart,
function initializeData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push({
name: setName($scope.jsondata[x].name),
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 5000);
}
function updateData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
console.debug("here");
for (x = 0; x < 5; x++) {
$scope.chart.series[0].data[x].update({
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '11px'
}
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Total Score',
align: 'high'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Total Score <b>{point.y:.3f}</b>'
},
series: [{
name: 'Active Users',
data: [],
dataLabels: {
enabled: true,
rotation: 30,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
format: '{point.y:.3f}', // one decimal
}
}]
});
And as you can see I have animate : true, so I am not sure what is the problem here. I have this older plunker where all of the data is in separate series, but it animates fine. But this is the plunker I am working on and having trouble with. They are like identical basically. In the newer one I broke out the initialization of data into its own method, but that is the only real main difference.
Some edits:
So as I was saying, I have done things this way with an areaspline chart (I know it was said they work a bit different but they are set up identically).
function initializeData() {
$interval.cancel(mainInterval);
$scope.previousPackets = '';
$http.get("https://api.myjson.com/bins/nodx").success(function(returnedData) {
var newdata = [];
var x = (new Date()).getTime();
for (var step = 9; step >= 0; step--) {
newdata.push([x - 1000 * step, 0]);
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 2000);
}
function updateData() {
$http.get(url + acronym + '/latest').success(function(returnedData) {
var x = (new Date()).getTime();
if ($scope.previousPackets != returnedData[0].numPackets) {
$scope.chart.series[0].addPoint([x, returnedData[0].numPackets], true, true);
$scope.previousPackets = returnedData[0].numPackets;
} else {
$scope.chart.series[0].addPoint([x, 0], true, true);
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Packets'
},
plotLines: [{
value: 0,
width: 1,
color: '#d9534f'
}]
},
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Packets',
data: []
}]
});
I also updated the first chunk of code with the initializeData() method and updateData() method which are seemingly identical in both different charts.

It looks like it plays an important role if you provide your data at chart initialization or after. For simplicity I refactored your code a little
function initializeChart(initialData, onload) {
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: onload
}
....
series: [{
name: 'Active Users',
data: initialData,
dataLabels: {
enabled: true,
format: '{point.y:.3f}', // one decimal
}
}]
});
}
function getData(callback) {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push([setName(ret[x].name), ret[x].data]);
}
callback(newdata);
});
}
As a result your two planks are in essense reduced to two methods below. The first initializes chart with preloaded data and the second updates data in existing chart.
function readDataFirst() {
getData(function(newdata) {
initializeChart(newdata);
});
}
function initializeChartFirst() {
initializeChart([], function() {
getData(function(newdata) {
$scope.chart.series[0].setData(newdata);
})
});
}
The first one animates fine while the second does not. It looks like highcharts skips animation if dataset is not initial and is treated incompatible.
However if you really want to have animation in your current plant (chart first workflow) you can achieve that by initializing first serie with zeros and then with the real data. This case it will be treated as update
function forceAnimationByDoubleInitialization() {
getData(function(newdata) {
initializeChart([]);
var zerodata = newdata.map(function(item) {
return [item[0], 0]
});
$scope.chart.series[0].setData(zerodata);
$scope.chart.series[0].setData(newdata);
});
All these options are available at http://plnkr.co/edit/pZhBJoV7PmjDNRNOj2Uc