Highcharts applying custom style to context button using css class - javascript

I have a large set of Highcharts graphics that all use the exporting.js library for downloading in various formats. I would like to customize the context button on these charts to match the native styles of the application.
Although I have found several examples of how to achieve this within the confines of the Highcharts chart-level script (i.e. THIS EXAMPLE ) it seems rather repetitive to implement these styles in every chart knowing that I have a large set to be affected.
I realize this could potentially be achieved using a global theme in Highcharts, however I am still limited by the configuration options of the library itself.
For instance this would be the suggested path:
var chartingOptions = {
exporting: {
buttons: {
'myButton': {
id: 'myButton',
symbol: 'circle',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF'
}
}
}
But unfortunately it does not provide a lot of expressivity.
Am I able to define a css style and pass it to the global theme or chart set using its ID or CLASS somehow?

Yes, you can set class or id of button using theme property.
buttons: {
'myButton': {
symbol: 'circle',
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
theme: {
class: "myButton highcharts-button highcharts-button-normal",
id: "myDiamondButton"
}
}
}

Related

How to register point Elements to Chartjs's internal registry

I am about to create a customized version of the radar chart using chartjs v3. A very important part are these radially drawn black points.
These point's are not created using an ordinary dataset because they're related to a datasets value, but with a custom datatype within dataset: "indicators".
const config = {
type: 'radar',
data: {
labels: [...],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
indicators: [{
...
}]
}]
}
options: {...}
};
Now I can simply draw them as points with canvas e.g. chartjs, but I actually need to register them to chartjs's own registry. This is due to the fact, that these points as well have to trigger on events like "onhover"/"onclick" which are transmitted within the library code.
Built-in tooltips for ex. are only available for the registered elements. Otherwise I'd have to build the whole control myself, which I'd like to avoid if possible.
My problem is, there is no documentation on how to register elements properly to the registry and I couldn't find a clean way to do it just yet.
So, does anybody know how to register custom elements to the charts internal registry? Is it even possible or meant to use like that?
Thanks for any useful hint on that!

Is there a way on echarts to get the series colors

I'm using Echarts v5.2.2 (in an Angular project, with ngx-echarts) to render a line chart using multiple series. I have a listener for the 'highlight' event. This event is giving me an object with a batch of seriesIndex and dataIndex but it doesn't provide the color of each series.
Is there a way to get the colors that were dynamically assigned by echarts?
This is what I'm trying to implement:
Listen when the mouse pointer snapped into a graph line point.
Doing this via this.chartInstance.on('highlight', this.handleShowTip);.
Use the batch of seriesIndex & dataIndex where the mouse pointer snapped to render a table using color, x & y value as columns (the table is placed outside the graph.
I understand that I could use the tooltip's formatter option with a callback function which will provide the series colors in its arguments... and I could broadcast these arguments outside my graph component to render what I need anywhere I want, but this does not feel correct (a formatter is aimed to return HTML or string) and I wonder if there's a better way to get the generated series colors.
Thank you!
The Echarts uses a built-in palette based on the theme. The easiest way to get a set of colors is this:
myChart.getOption().color
To get the colors that are mapped to the series, you can do the following:
myChart.getModel().getSeries().map(s => {
return {
seriesIndex: s.seriesIndex,
seriesColor: myChart.getVisual({
seriesIndex: s.seriesIndex
}, 'color')
}
})
And the result will be something like this:
[
{
"seriesIndex":0,
"seriesColor":"#5470c6"
},
{
"seriesIndex":1,
"seriesColor":"#91cc75"
},
{
"seriesIndex":2,
"seriesColor":"#fac858"
},
{
"seriesIndex":3,
"seriesColor":"#ee6666"
},
{
"seriesIndex":4,
"seriesColor":"#73c0de"
}
]

Multiple brush charts with Apexcharts in VueJs

I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,
I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim

JVectorMap: drill-down for custom regions

Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?
I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.
$(document).ready(function () {
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
onRegionClick: function(event, code) {
if(code == "US-TX") {
return false;
} else {
event.stopImmediatePropagation();
}
}
}
});
});
Explanation:
As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.
Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.
BTW, thanks to bjornd for the great jVectorMap.
There's no standart behaviour to reach this.
To handle this I had to modify MultiMap file. In addMap function you could add
hardcode check region code or add it to config and pass or deny drilling down.

Javascript Infovis change individual node color

In this case i'm using JIT Hypertree. I am going to differentiate a node's color from the other's so that every node on the tree have their own color. Is there anyway to change the individual color so it would be different from other node?
I just managed to change the color of all nodes, but not individual.
Node: {
dim: 9,
color: "#009933"
},
You have to set the overridable property to true there on Node.
Node: {
dim: 9,
overridable: true
},
Then, after loading data and before drawing, iterate over the nodes and use setData to set the individual colors. Here's an example that uses random colors, but you could also plug colors into your JSON data and pull it from there:
ht.graph.eachNode(function(node) {
node.setData('color', "hsl("+Math.random()*360+",100%,50%)");
});
Now, shameless plug: I wrote a library to generate colors based on, say, IDs. So if you don't want to handpick colors and you want the colors to have a persistent relation to the data, it would help. Here's the example of using that.
ht.graph.eachNode(function(node) {
node.setData('color', $.fn.autumn.getColor(node.id));
});

Categories