i'm using highchart to draw network graph.
and i want to change node's color.
my code to update node is
highchart.series[0].nodes[5].update({color: '#ff0000'});
it seem to work, but i get error like this.
Uncaught TypeError: Cannot read property 'concat' of undefined
at t.setNodeState [as setState]
i guess it's not working
when i update edge's node(has no "from or to" link) and move mouse on graph.
how i can update node's color?
enter image description here
const graphData = [
{from: 'Root', to: 'Group1'},
{from: 'Group1', to: 'Group1-1'},
{from: 'Group1-1', to: 'file1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-2'},
];
const nodeData = [
{ id: 'Root', color: '#000000'},
{ id: 'Group1', color: '#00ff00' },
{ id: 'Group1-1', color: '#00ff00' },
{ id: 'file1-1-1', color: '#0000ff' },
{ id: 'asset1-1-1', color: '#d0d0d0' },
{ id: 'asset1-1-2', color: '#d0d0d0' },
];
const highchart = Highcharts.chart('highchart', {
chart: {
type: 'networkgraph',
plotBorderWidth: 1,
backgroundColor: 'transparent',
},
title: {
text: undefined
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
linkLength: 100,
integration: 'verlet', // "euler"
},
link: {
width: 1,
color: '#B1B1B0',
dashStyle: 'Dash'
},
dataLabels: {
enabled: true,
y: -1,
style: {
fontSize: 10,
fontFamily: 'NotoSans-SemiBold',
textOutline: false
},
inside: false, // text 반전
textPath: {
enabled: false // circle 에 맞춰 text 곡선처리
},
linkTextPath: {
enabled: false
},
linkFormat: '',
},
point: {
events: {
update: function(param){
console.log('update', param)
}
}
}
},
},
tooltip: {
enabled: false
},
series: [{
name: 'Root',
id: 'Root',
allowPointSelect: true,
data: graphData,
nodes: nodeData,
}]
});
$('#btn').on('click', function(){
highchart.series[0].nodes[5].update({marker: {
fillcolor: '#ff0000'
}});
});
#highchart {
width: 500px;
height: 500px;
background: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<button id="btn">update</button>
<div id="highchart"></div>
The update feature doesn't exist for the nodes. It works for the points - https://api.highcharts.com/class-reference/Highcharts.Point#update
However, you can change the point color in this way:
highchart.series[0].nodes[5].graphic.css({
fill: 'red'
})
Demo: https://jsfiddle.net/BlackLabel/0Lwuce7q/
Related
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
}
I used apexcharts.js for making chartbar on js. So i want to change cursor to pointer. help please! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
my-code!
var options = {
series: [{
name: 'series1',
data: [60, 85, 75, 120, 100, 109, 97]
}],
toolbar: {
show: false,
},
chart: {
height: 350,
type: 'area',
fontFamily: 'Proxima Nova',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I had encountered the same problem. I will present you two solutions:
1st method : Found on Github
You can set the cursor to point with:
chart: {
...
events: {
dataPointMouseEnter: function(event) {
event.path[0].style.cursor = "pointer";
}
}
}
See more details in this github link : https://github.com/apexcharts/apexcharts.js/issues/1466
2nd method : My own method
You can target the class name of the apexchart component via Inspector, then at the code level add the following property to this class :
cursor: pointer
Example :
// Change cursor on hover
.apexcharts-pie {
cursor: pointer;
}
I had same problem. Here is two solutions:
chart: {
width: 320,
type: ...,
events: {
dataPointMouseEnter: function(event) {
event.target.style.cursor = "pointer";
// or
event.fromElement.style.cursor = "pointer";
}
},
}
I retrieve JSON data from server and put it in Highchart as series.I am facing this error:
Error: Invalid value for attribute y="NaN" highcharts.js : 9
The error happen if I send chartSeries parameter from callChart function.But if I copy chartSeries value and put it directly inside drawChart it able to display the chart.However there no problem for other parameter such chartCategory and chartTitle.
Here is my code:
function callChart(){
for (var i in jsonData){
console.log('#i '+i);
console.log('#subSegment i '+jsonData[i].subSegment);
var chartTitle= jsonData[i].subSegment;
console.log('categories '+ jsonData[i].categories);
var chartCategory= jsonData[i].categories;
console.log('series '+ JSON.stringify(jsonData[i].series));
var chartSeries=JSON.stringify(jsonData[i].series);
drawChart($('.chartContainer'),chartSeries,chartCategory,chartTitle);
break;}}
Here is the code of drawChart;
function drawChart(container,chartSeries,chartCategory,chartTitle) {
console.log('# test');
console.log('# chartSeries='+chartSeries);
console.log('# chartCategory='+chartCategory);
console.log('# chartTitle='+chartTitle);
//it works if I put the chartSeries directly here
/*chartSeries=[{"type":"column","stack":null,"pointPlacement":null,"name":"HDD","linkedTo":null,"id":"hdd","data":[30,30,70,90,37,200],"color":"greenColor","borderWidth":null},{"type":"column","stack":"old","pointPlacement":null,"name":"SSHD","linkedTo":null,"id":"sshd","data":[0,100,40,90,60,90],"color":"yellowColor","borderWidth":null},{"type":"column","stack":"old","pointPlacement":null,"name":"SSD","linkedTo":null,"id":"ssd","data":[50,100,40,90,60,100],"color":"blueColor","borderWidth":null},{"type":"column","stack":"forecast","pointPlacement":null,"name":"HDD","linkedTo":"hdd","id":null,"data":[30,80,40,100,60,90],"color":"greenColor","borderWidth":null},{"type":"column","stack":"forecast","pointPlacement":null,"name":"SSD","linkedTo":"ssd","id":null,"data":[30,80,40,100,60,90],"color":"yellowCollor","borderWidth":null},{"type":"spline","stack":null,"pointPlacement":null,"name":"Share","linkedTo":null,"id":null,"data":[30,80,40,100,60,90],"color":"black","borderWidth":null}] ;
*/
if (!container.length) {
return;
}
var chart = new Highcharts.Chart({
tooltip: {
enabled: true
},
credits: {
enabled: false
},
chart: {
renderTo: container[0],
style: {
fontFamily: '"Arial", "Helvetica", "sans-serif"',
fontSize: '12px',
fontWeight: 'bold'
},
marginLeft:60,
marginRight:65
},
title: {
text: chartTitle
},
xAxis: {
categories: chartCategory
},
yAxis: [{
min: 0,
title: {
text: 'Units in 000\' s'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}, { // Secondary yAxis
title: {
text: 'Share',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
min: 0,
max: 100
}],
legend: {
enabled:false
},
plotOptions: {
column: {
grouping: false,
stacking: 'normal',
pointWidth:30
},
series:{shadow:false}
}
,series:chartSeries
});
}
Thanks alot.
Okay, I found it already.
Instead pass JSON.stringify(jsonData[i].series) , directly pass jsonData[i].series.
Thanks
I have having a problem with flot pie chart, its not showing correct percent value in tooltip, for example it shows series1:%p.0%
js code
var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Please help to resolve this.
thanks
You Need to include jquery.flot.tooltip.min.jsand change few setting as per below working example to display the tooltip with value.
datapie = [
{label: "Running", data: 19.5, color: '#e1ab0b'},
{label: "Stopped", data: 4.5, color: '#fe0000'},
{label: "Terminated", data: 36.6, color: '#93b40f'}
];
function legendFormatter(label, series) {
return '<div ' +
'style="font-size:8pt;text-align:center;padding:2px;">' +
label + ' ' + Math.round(series.percent)+'%</div>';
};
$.plot($("#placeholder"), datapie, {
series: {
pie: {show: true, threshold: 0.1,
// label: {show: true}
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: "%p.0%, %s",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
legend: {show: true, labelFormatter: legendFormatter}
});
#flotTip {
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
opacity: .80;
filter: alpha(opacity=85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<div id="placeholder" style="width:500px;height:400px;"></div>
Working Example Link : http://jsfiddle.net/Rnusy/335/
You need the Tooltip plugin.
See a complete list of available plugins here: Flot plugins
Can I apply theme without reloading the whole chart. Can I push the themes settings within the chart code? In highcharts site all examples are single theme based. Here is my code
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
$( "#change_theme" ).on("change", function() {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
//alert(valueSelected);
if(valueSelected=='default.js')
{
location.reload();
}
else{ $.getScript('js/themes/'+valueSelected, function() {
//alert('Load was performed.');
chart();
});
}
});
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
yAxis : [{
offset: 0,
ordinal: false,
height:280,
labels: {
format: '{value:.5f}'
}
}],
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my js fiddle
Please help. Thanks in advance.
This is possible if you're using modern browsers that support CSS variables.
Highcharts.theme = {
colors: [
'var(--color1)',
'var(--color2)',
'var(--color3)',
'var(--color4)',
'var(--color5)',
'var(--color6)',
]
}
Highcharts.setOptions(Highcharts.theme);
function setTheme(themeName) {
// remove theme-* classes from body
removeClasses = Array.from(document.body.classList).filter(s => s.startsWith('theme-'));
document.body.classList.remove(...removeClasses)
if (themeName) {
document.body.classList.add('theme-' + themeName);
}
}
CSS
body {
--color1: #e00;
--color2: #b00;
--color3: #900;
--color4: #600;
--color5: #300;
--color6: #000;
}
body.theme-dark {
--color1: #555;
--color2: #444;
--color3: #333;
--color4: #222;
--color5: #111;
--color6: #000;
}
body.theme-retro {
--color1: #0f0;
--color2: #ff0;
--color3: #0ff;
--color4: #0a0;
--color5: #aa0;
--color6: #00a;
}
Unfortunately it is not possible, so you need to destroy and create new chart.