I am drawing paths over a graph, and I need to change their color on hovering over another element on the page - a list of the data points on a div on the right of my page.
Here is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'area',
backgroundColor: 'transparent',
height: 470
},
plotOptions: {
area: {
enableMouseTracking: false,
showInLegend: false,
stacking: 'percent',
lineWidth: 0,
marker: {
fillColor: 'transparent',
states: {
hover: {
lineColor: 'transparent'
}
}
}
}
},
series:
[
{
name: 'over',
color: 'none',
data: overData
},
{
id: 's1',
name: 'Series 1',
data: data,
showInLegend: true,
zoneAxis: 'x',
zones: zones
},
{
name: 'under',
color: 'none',
data: underData
}
],
xAxis: {
plotLines: plotLines,
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: ''
},
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
}
//,min: -25
},
legend: {
enabled: false
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}},function(chart){
dataForChart.forEach(function(entry) {
chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
.attr({
'id' :'line_'+entry.id,
'stroke-width': 2,
stroke: 'white',
zIndex:1000
})
.add();
});
});
The piece of code in question is this:
chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475])
.attr({
'id' :'line_'+entry.id,
'stroke-width': 2,
stroke: 'white',
zIndex:1000
})
.add();
Now all I want to do, is change the color of that path on hover. As you can see, I do assign an id to each line.
I have a column on the front end that when a user hovers over the point's name (in this case it is a donor name such as USAID) and when that happens, I want to trigger a hover state (preferably previously defined in the second block of code I pasted) and change the line color.
How can I achieve this?
1) How do I add a hover style to that path?
2) How do I trigger the hover state for the specific line when I hover over it's name in the list of donors?
You can add .on() event on the rendered object.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 10,
stroke: 'red'
})
.on('mouseover',function(){
$(this).attr({
'stroke': 'yellow'
})
})
.on('mouseout',function(){
$(this).attr({
'stroke': 'red'
})
})
.add();
Example: http://jsfiddle.net/6g5hfycw/
Related
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color : '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
}
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align:'left',
allowDecimals: true,
formatter: function(){
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
series: [{
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
data: [
[20, 40],
[20, 40],
]
}]
});
Above is the code for an Area range chart. Couple of questions.
I just want to show some random text on top of each area. I tried with dataLabels but I doesn't seem to work. Isn't it possible to do so?
Yaxis seems to be shown in AreaRange chart when mouse is hovered over the chart. Can it be set to be displayed by default?
Any help would be much appreciated. Thanks in advance.
I tried to reproduce your code and here is an output: https://jsfiddle.net/BlackLabel/uqmyjsr9/
The dataLabels config needs to be nested in the series object.
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color: '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align: 'left',
allowDecimals: true,
formatter: function() {
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
},
I am not sure here - the yAxis is displayed all the time, not only after hovering over the chart.
I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
Well, I have a bar Highchart showing some scores, what I want to get is the x Axis value (the user id) when I click a plot serie.
Making some research I was able to show the x Axis value when I click on the chart background (I am using console.log to show this data), but I a unable to do it clicking any plot serie (the coloured bar)
This is the snippet:
var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"];
var prcs=[2,12,13,11,15];
Highcharts.chart('container', {
chart: {
type: 'bar',
events:{
click: function(te){
console.log(prcs[Math.round(te.xAxis[0].value)]);
}
}
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
categories: cats,
lineColor: '#FFFFFF',
tickColor: 'transparent',
labels: {
align: 'left',
x: 0,
y: -12,
style: {
textOverflow: 'none',
width:'300px',
whiteSpace:'normal'//set to normal
}
}
},
yAxis: {
min: 0,
title: {
text: null,
},
labels: {
enabled: false
}
},
legend: {
enabled: false
//reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
events:{
click: function(te){
console.log(this.name);
}
}
//pointPadding: 0,
//groupPadding: 0
},
bar:{
}
},
series: [{
name: 'High',
color: '#009900',
data: [0,1,0,1,0]
}, {
name: 'Mid',
color: '#FFCC66',
data: [4,3,0,1,1]
}, {
name: 'Low',
color: '#FF6666',
data: [4,4,5,1,0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 210px"></div>
The same in jsFiddle: http://jsfiddle.net/29vfsc4t/5/
If you click on the background you will get the user id, and clicking on any bar you will get the "score", what I need is to get the user id when I click on a bar.
You should be catching the point.event instead of the chart.event to get the point's xAxis category:
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
point: {
events: {
click: function(te) {
console.log(this.category);
console.log(this.x);
}
}
}
},
bar: {}
},
Note the change to console.log(this.category) to show the xAxis name.
I need to draw a line graph, but just a line graph with no axes, values, etc. Only the graph and percentage at the end.
Q: how to remove all the items from the graph, indicate the axes, axes, etc. you only need to leave a line graph and interest.
$('#audience').jqChart({
legend: { visible: false },
border: { visible: false },
title:
{
text: 'Chart Title',
font: '12px sans-serif',
lineWidth: 1,
// strokeStyle: 'black',
fillStyle: 'white'
},
animation: { duration: 1 },
series: [
{
pointWidth: 0.2,
type: 'bar',
fillStyle: '#7fbbe5',
data: [['A', 33]],
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '11px sans-serif',
fillStyle: 'white'
},
tickOptions: {
showGridline: false
}
},
{
pointWidth: 0.2,
type: 'bar',
fillStyle: '#92b5c7',
data: [['A', 67]],
tickOptions: {
showGridline: false
},
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '11px sans-serif',
fillStyle: 'white'
}
}
]
});
I have an image, where I show, what I have, And what I need:
http://i57.tinypic.com/2h3x3yx.jpg
You can splice the jqChart Axes -
var axes = $('#jqChartDiv').jqChart('option', 'axes');
//remove all series
axes.splice(0, axes.length );
Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:
Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.
Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}
Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link: