I have some problems with highcharts. So, after i do drilldown series have same color, they extend it from column which was clicked, official highchart's jsfidle perfectly demonstrate this behaviour (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown)
In my config object i have array of colours, but it uses it only for initial view and after drilldown everything have the same color. I tried this option, but it didn't help:
chartOptions.plotOptions.column = {
colorByPoint: true
};
Also had an idea to manually pick random color from array on each drilldown, but in this case i have problem with legend's item colours.
There must be some option to achieve it, but maybe i missing something.
Would be appreciate for any advice!)
You can achieve it by defining colorByPoint: true property for each series. Like this:
Highcharts.chart('container', {
...
drilldown: {
series: [
{
colorByPoint: true,
name: "Chrome",
id: "Chrome",
data: [
...
]
},
{
name: "Firefox",
id: "Firefox",
colorByPoint: true,
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
colorByPoint: true,
data: [
...
]
},
{
name: "Safari",
id: "Safari",
colorByPoint: true,
data: [
...
]
},
{
name: "Edge",
id: "Edge",
colorByPoint: true,
data: [
...
]
},
{
name: "Opera",
id: "Opera",
colorByPoint: true,
data: [
...
]
}
]
}
});
Check this fiddle - https://jsfiddle.net/30o1genk/
UPD: When you add series dynamically after a drilldown, your drilldown event handler should looks like this:
events: {
drilldown: function(e) {
const point = e.point;
const series = {
colorByPoint: true,
data: [{name: "test", y: 10}, {name: "test2", y: 20}],
};
this.addSingleSeriesAsDrilldown(point, series, false)
this.applyDrilldown();
}
}
Check this fiddle - https://jsfiddle.net/1fpdckn5/ for the dynamic case.
You can set a wanted color for each drilldown series.
Demo: https://jsfiddle.net/BlackLabel/1vbyp53w/
drilldown: {
series: [{
name: "Chrome",
id: "Chrome",
color: 'orange',
data: [
...
]
},
{
name: "Firefox",
color: 'red',
id: "Firefox",
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
color: 'blue',
data: [
...
]
},
]
}
API: https://api.highcharts.com/highcharts/drilldown.series
Related
I want to show the user about which nodes are some sort of type in network graph of Highchart JS.
For example, the red node would be about "car" and the black node would be about "person".
How can I implement such a legend in Highchart Js?
Here is my codepen.
Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;
Highcharts.chart('container', {
chart: {
type: 'networkgraph'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
legend: {
enabled: true
},
series: [{
showInLegend: true,
data: [
['A', 'B'],
['C','D'],
['E','F']
],
nodes:[{
id:'A',
color:'#ff1000'
},{
id:'B',
color:'#222222'
},
{
id:'C',
color:'#ff1000'
},
{
id:'D',
color:'#222222'
},
{
id:'E',
color:'#ff1000'
},
{
id:'F',
color:'#222222'
},]
}]
});
Thank you in advance.
Have you tried adding the dataLabel to series property and add a name to your nodes.
{
id: "A",
color: "#ff1000",
name: "car" <--------- name property
},
Something like this:
series: {
dataLabels: {
linkFormat: '',
enabled: true,
format: "{point.name}",
crop: false,
defer: false,
useHtml: true,
},
}
Full example:
https://codepen.io/tiagotedsky/pen/zYZYOLR
I currently have an array of data that I am trying to display on Highcharts.
const data = [10,31,13,19,21]
I am having issues with displaying a specific index of an array. For example, I would like one column to be data: data[0] the other data: data[1] etc.. When doing this I do not have any data displaying on my graph.
I am able to display data when doing data:data and displaying the whole array which creates multiple columns but for my situation, like to keep each point in one column.
Here is a link to a jsfiddle
desired look with specific index of an array i.e. data: data[1]:
outcome if using data: data
here is my code:
const data = [10,31,13,19,21]
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function () {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Low',
data: data[0],
showInLegend: false,
},{
name: 'Low',
data: data[1]
},{
name: 'Medium-Low',
data: data[2]
}, {
name: 'Medium',
data: data[3]
}, {
name: 'Medium-High',
data: data[4]
}, {
name: 'High',
data: data[5]
}
]
});
The data must be an array, meanwhile data[0], data[1], ... are numbers. Instead, you need to assign those values in the array, like: data: [data[1]].
Demo: https://jsfiddle.net/BlackLabel/ty42b0hs/
series: [{
name: 'Low',
color: '#0D6302',
data: [data[0]],
showInLegend: false,
},{
name: 'Low',
color: '#0D6302',
data: [data[1]]
}, ...]
im working on network graph highcharts
each node should have a new child but it should not merge with another subnode if its has the same name, like child1, child2, child3, pointing to subchild1,for each individual we should have the individual nodes pointing to each one
fiddle link -> https://jsfiddle.net/GnanaSagar/36k2wmry/1/
You can also use the formatter function for data labels:
series: [{
dataLabels: {
enabled: true,
format: undefined,
formatter: function() {
if (this.key.indexOf('subchild') >= 0) {
return 'subchild1'
}
return this.key
}
},
data: [...,
{
from: 'child1',
to: 'subchild1'
},
{
from: 'child2',
to: 'subchild2'
},
{
from: 'child3',
to: 'subchild3'
}
]
}]
Live demo: https://jsfiddle.net/BlackLabel/n4gd8v3r/
API: https://api.highcharts.com/highcharts/series.networkgraph.dataLabels.formatter
So apparently series.networkgraph.nodes works.
series: [{
dataLabels: {
enabled: true
},
data: [
{from: 'parent', to: 'child1'},
{from: 'parent', to: 'child2'},
{from: 'parent', to: 'child3'},
{from: 'child1', to: 'subchild1.1'},
{from: 'child2', to: 'subchild2.1'},
{from: 'child3', to: 'subchild3.1'}
],
nodes: [{
id: 'subchild1.1',
name: 'subchild1'
},
{
id: 'subchild2.1',
name: 'subchild1'
},
{
id: 'subchild3.1',
name: 'subchild1'
}
]
}]
jsFiddle: https://jsfiddle.net/9g42nqza/ (I have to comment out some of your original code because it was throwing error).
I have an example here how can I add new data on the drilldown series data
Example, this is the default
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
]
]
}]
}
Now I'm trying to add new value but when always undefined I'm trying to call this.options.drilldown.series.data[2] doesn't work always undefined
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13,
55.21 //potential_loss
],
[
'v8.0',
17.2,
12.42 //potential_loss
]
]
}]
}
Custom properties are saved in options if you define your point as an object instead of an array:
{
name: 'v11.0',
y: 24.13,
potential_loss: 20.12
}
In tooltip.pointFormatter this property can be referred as this.potential_loss.
Live demo: http://jsfiddle.net/kkulig/cuawm80r/
I have this pie chart in sencha
{
xtype: 'polar',
height: 600,
id: 'genderPieChart',
padding: 5,
title: 'Chart showiing the number of Males and Females ',
colors: [
'#115fa6',
'#94ae0a'
],
store: 'GenderStore',
series: [
{
type: 'pie',
xField: 'counter',
yField: 'types'
}
],
interactions: [
{
type: 'rotate'
}
],
legend: {
xtype: 'legend',
itemSelector: 'div',
itemTpl: Ext.create('Ext.XTemplate',
'',
{
definitions: [
'Male, Female'
]
}
)
}
}
I need to add a legend to it using the fielfd from my model, the model being
Ext.define('Qvidi.model.MyModel', {
extend: 'Ext.data.Model',
alias: 'model.MyModel',
requires: [
'Ext.data.field.Integer'
],
fields: [
{
name: 'types'
},
{
type: 'int',
name: 'counter'
}
]
});
as you can see I did add the legend in the first block of code, but I need it to be configured, and i don't know how, tried everything i could think of, so far unsuccessful