Highcharts Sunburst custom legend and click functionality - javascript

Sunburst custom legend and click functionality
I have a big set of data on sunburst and I want to show level 2 as legend on the right. Since I know the values, I made a custom legend with all level 2 data made it as links. But I'm not getting the color codes for all levels.
I used var colors = Highcharts.getOptions().colors;
But I'm getting only a few color codes.
How to get full color codes used in the graph as it is ?
And when I click on that legend, I want to show only that level and its sub levels in the graph. (the same default functionality that is available in the graph). How can I do this ?
Please help

I added a color variable into your code:
const color = i >= colors.length ? colors[i - colors.length] : colors[i];
Demo: http://jsfiddle.net/BlackLabel/qb7ckxwn/
Here is an approach how to trigger the drill down in the sunburst on the outstanding element:
document.getElementById('btn').addEventListener('click', function(){
chart.series[0].points.forEach(d => {
if (d.name === 'Asia') {
chart.series[0].setRootNode(d.id, true, { trigger: 'click' })
}
})
})
Demo: https://jsfiddle.net/BlackLabel/t7pghmxd/

Related

Synchronizing multiple StackBarchart (Highcharts) on a page

I have multiple stack bar Chart on a page, which could have different series. If I hover over a stack in chart, I want this hover to be synced on other charts as well (showing the tooltip at the hovered name of stack, showing hover effect).
The problem is in the below example, the tooltip always shows the opposite stack series name.
For my case if I hover over installation in first stack bar chart it is showing tooltip for installation in first chart but in second chart it is showing tooltip for others.
How I can make sure if I hover over installation in first chart then tooltip of installation for that particular stack in second chart should be displayed.
Attached JSFiddle for same in the comments
Thanks
It always reaches the second (last series) and in it changes the state to hover. To fix this you need to check if the series of the point we have the hover on compare with the series of the point we are checking in the loops.
function sharedMouseOver() {
let currentX = this.x;
let currentSeries = this.series.index;
charts = Highcharts.charts;
charts.forEach(function(chart, index) {
chart.series.forEach(function(series, seriesIndex) {
series.points.forEach(function(point, pointsIndex) {
if (point.x == currentX && point.series.index == currentSeries) {
chart.tooltip.refresh(point)
point.series.setState('hover');
}
})
});
});
}
Demo: https://jsfiddle.net/BlackLabel/kfL5087x/1/

How to change setPointFillStyle for LightningChart after adding PointSeries?

I am adding the series to the chart like this
const series = this.chartInstance
.addPointSeries({ pointShape: shapes[shapeIndex], dataPattern: lsjs.DataPatterns.horizontalProgressive })
.setPointFillStyle((solidFill) => solidFill.setColor(lsjs.ColorHEX(palette.simpleSet[seriesColorIndex])))
.setName(groupTag.slice(0, groupTag.indexOf('(')));
I have grid that displays the series name and symbol.
On selecting the row from grid I want to hide the series with particular symbol(example circle) from chart.
Can you please suggest a solution to achieve this on row selection(show series) and deselection(hide series) ?
In our Simple Scatter Interactive Example we show how this can be achieved. You can view and edit the code by clicking on the Edit this Example-button.

Highcharts tooltip background according to line (without setting backgroundColor = null)

I have this exact same issue: Highcharts tooltip background according to line
but the solutions provided here do not work for me because setting backgroundColor to null makes the pointer arrow disappear:
Hence why I have been working with trying to update the tooltip background color from the formatter itself where I have access to the series color:
args.options = Object.assign(args.options, {backgroundColor : this.series.color});
this.color = this.series.color;
But for some reason only the initial color replacement works for me. Then subsequent tooltips show the color that I updated the first time.
First hover:
Second hover:
AND
First hover:
Second hover:
Demo of issue: http://jsfiddle.net/GGQ2a/23/
Refresh the page a couple times and hover on different series to see the issue.
I need to change the color on every hover and for some reason the replacement only gets picked up the first time arround
You can wrap Tooltip.refresh() method and change the tooltip's background according to the point's series color.
const H = Highcharts;
H.wrap(H.Tooltip.prototype, 'refresh', function (p, point, mouseEvents) {
p.call(this, point, mouseEvents);
const label = this.label;
if (point && label) {
label.attr({
fill: point.series.color
});
}
});
example: http://jsfiddle.net/t38x6kug/

Hide x-axis labels but show tooltips in chart.js

I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!
You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/

Raphael/Mapael - plots and areas controlled by a single legend

I've been working on few custom SVG maps based on Raphael.js but Mapael is the library that I'm working with. I have setup a jsfiddle of the example to be better explain my.
http://jsfiddle.net/arnabsaha/3jNE9/
As you can see, I have mapped the different paths to show tooltips of different descriptions. Alongwith plots for things like stairs/escalators (in a mall environment) with it's legend. And another legend for the different sections/paths of the map.
Now what I need to do is find a way where for eg. click on the legend item to hide/show a path/area of the map (which is achieved) along with the tooltip description that is shown when hovered on that particular path/area.
Now, after trying few unsuccessful things, I was thinking of a workaround where clicking on the legend item for the path/area to also hide/show a plot with a text description attribute. For eg. In the fsfiddle example, click on 'Azul by moussy', (first item in the areas legend) the area is highlighted, along with this, if I could also hide/show a plot (with text attribute) which is the description for that particular path/area?
I hope I was able to explain my situation clearly.
Any ideas/help will be much appreciated!
Thanks,
Arnab
code snippet:
$(function(){
$(".maparea6").mapael({
map : {
name : "world_countries",
zoom: {
enabled: true,
maxLevel : 10
},
defaultPlot: {
size: 10
},
defaultArea: {
attrs : {
stroke : "#000",
"stroke-width" : 0.5
}
}
},
legend : {
area : {
display : true,
title :"",
slices : [
{
max :63,
min :61,
attrs : {
fill : "#f0eeb5"
},
label :"AZUL by moussy"
}
,
{
max :11,
min :9,
attrs : {
fill : "#f0eeb5"
If anyone is interested, $(".areaLegend svg text:eq(X)"); allows you to add events on the legend items but this solution isn't very handy to use ...
And, the paths and plots already have this feature, they can be easily selected ie : $("[data-id='path_ad']"); in order to add some events or anything on them.
And the developer's github: https://github.com/neveldo/jQuery-Mapael
Thanks for reporting this issue about the elements in the legend. It has been solved by the version 1.0.0 of jQuery Mapael : https://github.com/neveldo/jQuery-Mapael/commit/50baf1600d393a736a434c4ee400081da69ede9b

Categories