I have a button in my highcharts chart that uses the following code:
exporting: {
buttons: {
backButton: {
_titleKey: 'backTitle',
enabled: theChart.buttonOn,
x: 0,
y: 300,
onclick: function () {
$(this).parents(".chart").data('chart', $(this).parents(".chart").data('mainChart'));
$(this).parents(".chart").trigger('redoChart');
},
text: 'Click to return to full graph',
width:200,
theme: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc',
states: {
hover: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
},
select: {
'stroke-width': 1,
stroke: 'black',
fill: '#cccccc'
}
}
}
}
}
}
When I click on this button, nothing happens. I've determined that it is because $(this).parents(".chart") is not appropriately identifying the container div for my chart (which does have the class "chart"). If I replace $(this).parents(".chart") with $("#thechart"), everything is fine.
Use:
$(this.container).parents('.chart').hide();
In the button handler this is a highcharts object. this.container is the highcharts created div within your div. So, to hide the whole thing, you're looking up to the parent that you added a chart class to.
Related
Need to change background color of highchart doughnut
Expected Result
Acheived Result
JS Fiddle Link : https://jsfiddle.net/shantanugade/f5ojh13z/1/
Need help with this!! Thanks in Advance!
Update: - I tried Changing background color -
Result
After Adding background color
You can use Highcharts.SVGRenderer class to add a circle as the background:
chart: {
...,
events: {
load: function() {
var center = this.series[0].center;
this.renderer.circle(
center[0],
center[1],
(this.plotHeight - this.spacingBox.y * 2) / 2)
.attr({
fill: 'green'
}).add();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/oghbp479/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
https://api.highcharts.com/highcharts/chart.events
You can simply change the RGB value on the chart object;
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 175,
width: 175,
margin: 0,
backgroundColor: 'rgba(250,251,236,1)' //this is the background of the whole chart, so change it to this RGBA value.
},
and if you want the third value to not be white but instead to blend in with the background color change the last value on colors array on plotoptions
plotOptions: {
pie: {
dataLabels: {
enabled: false,
distance: -10,
style: {
fontWeight: 'bold'
},
backgroundColor: "#fafbec"
},
states: {
hover: {
enabled: false
}
},
borderColor: '',
// center: ['50%', '50%'],
size: '100%',
colors: ['#000000', '#e45456', '#fafbec'], //here the last one is the color of the last line, which in the jsfiddle is white, you have to change it to '#fafbec' which is the hexadecimal equivalent of the 'rgba(250,251,236,1)'
},
series: {
states: {
inactive: {
opacity: 1
}
}
},
},
I would like to get shadow like effect in line graphs in Highcharts. I searched for this property but couldn't find it anywhere.
This can be done by using the shadow property, like this:
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 0,
offsetY: 5,
opacity: 0.2,
width: 5
}
}
},
Working example: http://jsfiddle.net/ewolden/zfscoz4f/2/
I want to change the underlying .css file of the vis.js library.
However, the changes are not reflected and I am even losing on features like "tooltips" or "navigation buttons".
I've tried to put the following into my .html file:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js">
</script>
<link href="/node_modules/vis/dist/vis.css" rel="stylesheet" type="text/css" />
All I want is to change the color of the navigation buttons and the tooltips.
Cheers!
This Q is rather old, but just for the record:
From what I've seen, elements in VIS networks are styled via settings of the function passed to it when the graph is rendered. This is probably because vis.js renders the graph to a HTML canvas which is basically a black box for browser and it cannot apply any styling to it dynamically.
So, head over to the docs http://visjs.org/docs/network/ and read up what's possible. Generally, you can change color {fill, border, text}, font family, fontsize, shapes of nodes, style of edges, etc.
Also, very useful is the examples gallery: http://visjs.org/network_examples.html
Example of my settings:
var options = {
// tree style
layout: {
// this would make the tree directed
// hierarchical: {
// direction: LR,
// sortMethod: directed
// },
// this makes the tree always the same
randomSeed:2
},
interaction: {
dragNodes :false,
navigationButtons: true, // these need some more CSS
keyboard: true
},
// read the docs for this
physics: {
barnesHut: {
avoidOverlap: 0.99,
gravitationalConstant: -3300,
springLength: 150,
},
minVelocity: 0.75,
timestep: 0.9,
stabilization: {
enabled:true,
iterations:1000,
updateInterval:25
}
},
// general nodes settings
nodes: {
shape: 'box',
font: {
size: 14,
color: '#3f3f3f',
strokeWidth: 3,
strokeColor: 'white',
face: 'akrobat'
},
borderWidth: 2,
color: {
background: '#d7d7f3',
border: '#3030a9',
}
},
// settings for groups of nodes
groups: {
first: {
shape: 'diamond',
size: 5
},
second: {
shape: 'dot',
size: '8',
font: {
strokeWidth: 0,
size: 18
},
color: {
background: '#f3d7d7',
border: '#a93030'
}
}
},
// general edges setting
edges: {
font: {
align: 'middle',
face: 'arial'
},
smooth: {
forceDirection: none
}
}
};
I have been using HighCharts extensively for one of my project. Recently I started using Annotation.js along with it.
ALthough, the library works well but I can't configure its usage at all. The link here provides options but they are not working for me
My issues:
I have multiple charts on a page. As soon as I use annotation.js , each of them shows annotation. how do I show them on desired charts. I tried
annotations :[{ enabledButtons : false}]
and
annotationOptions :{ enabledButtons : false}
Both of them had no affect.
2.I want to display the pallette (containing icons like square, circle etc..) at top-right.
I used xValue, yValue attribute,
I used x, y attribute,
I used 'anchorX and anchorY` attribute.
None of the above works for me.
I want just to show the text icon. How can I hide other icons (line, square and circle). Didn't get any way to try for this one.
Am I missing something here. Kindly suggest. My basic way of using chart config is as below:
chart: {
type: chartData.Type.toLowerCase()
//annotations: [],
},
annotationsOptions: {
xValue: 234,
yValue:12
},
title: {
text: chartData.xTitle ? chartData.xTitle : ""
},
xAxis: {
categories: chartData.Categories
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: chartData.yTitle ? chartData.yTitle : ""
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
annotations: [{
xValue: 40,
yValue: 15
}],
plotOptions: {
line: {
marker: {
enabled: true
}
}
},
series: chartData['Series'][opt] ? chartData['Series'][opt] : chartData['Series'][opt.replace(/-|\s/g, "")],
}
I have tried annotations inside charts object as well.
You should be able to hide annotations buttons using:
annotationsOptions: {
enabledButtons: false
},
You can use annotationsOptions.buttons for changing the buttons you would like to display. Here you can see the code that will show only text butotn:
annotationsOptions: {
buttons: [{
annotationEvents: {
step: function() {}, // to be called during mouse drag for new annotation
stop: function(e) {
var ann = this,
chart = ann.chart,
index = chart.annotationInputIndex = chart.annotationInputIndex ? chart.annotationInputIndex : 1,
input = document.createElement('span'),
button;
input.innerHTML = '<input type="text" class="annotation-' + index + '" placeholder="Add text"><button class=""> Done </button>';
input.style.position = 'absolute';
input.style.left = e.pageX + 'px';
input.style.top = e.pageY + 'px';
document.body.appendChild(input);
input.querySelectorAll('input')[0].focus();
button = input.querySelectorAll('button')[0];
button.onclick = function() {
var parent = this.parentNode;
ann.update({
title: {
text: parent.querySelectorAll('input')[0].value
}
});
parent.parentNode.removeChild(parent);
};
chart.annotationInputIndex++;
} // to be called after mouse up / release
},
annotation: { // standard annotation options, used for new annotation
anchorX: 'left',
anchorY: 'top',
xAxis: 0,
yAxis: 0,
shape: {
// type: 'text'
}
},
symbol: { // button symbol options
shape: 'text', // shape, taken from Highcharts.symbols
size: 12,
style: {
'stroke-width': 2,
'stroke': 'black',
fill: 'red',
zIndex: 121
}
},
style: { // buton style itself
fill: 'black',
stroke: 'blue',
strokeWidth: 2,
},
size: 12, // buton size
states: { // states for button
selected: {
fill: '#9BD'
},
hover: {
fill: '#9BD'
}
}
}]
}
Here you can find an example how it may work: http://jsfiddle.net/7m3Mr/261/
You can move your buttons using:
annotationsOptions: {
buttonsOffsets: [0, -50],
},
Here you can find demo showing how it may work:
http://jsfiddle.net/7m3Mr/263/
I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/