I have created a HighChart in a Ag data grid cell. On hovering over the Line chart, I need to display a tooltip with few details. I am able to show the tooltip within the cell, but as the tooltip is displayed within the cell, the content gets hidden in the cell. I need to display the tooltip in such a way that it can overlap and display the tooltip over another cell.
I tried setting the z-index to 99999 & position as relative/absolute of highchart tooltip. But it does not reflect.
Tried to override the css class .highcharts-tooltip by adding z index
Please can some css expert help me identify the issue?
There is no need to modify the CSS of the highchart tooltip.I followed the properties used in the below URL & it worked for me:
https://www.highcharts.com/demo/sparkline
I had missed out adding below chart options:
tooltip: {
outside: true,
}
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
}
Related
I have created a chart with 3 points. I have added two graphical elements as circle and rectangle (line) for dragging the points.
Circle dragging should apply for all three points in the graph as in the expected behavior screenshot below.
Line dragging is a vertical shift for graph to move it vertically.
Circle dragging does not apply for all 3 points when I return both graphical elements in the elements array as in the code. It just applies only for 1st point.
When I return one graphical element at a time it works.
Current Behaviour
image of how chart works now
Below I have included the code which returns graphic elements
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
let rec = {
type: 'group',
left: 'center',
position: myChart.convertToPixel('grid', item),
draggable: 'vertical',
ondrag: function (dx, dy) {
onPointDraggingLine(dataIndex, [this.x, this.y]);
},
children: [
{
type: 'rect',
top: '200x',
shape: {
width: 470,
height: 0
},
style: {
stroke: 'gray',
lineWidth: 5,
lineDash: [6]
},
cursor: 'move'
}
]
};
let onlyCrc = {
type: 'circle',
position: myChart.convertToPixel('grid', item),
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
z: 100,
cursor: 'move'
};
return { elements: [rec, onlyCrc] };
})
});
I have tried to return graphical elements as array of objects .And I have tried by giving a condition for dataIndex while mapping. but didn't work. Expected behavior is as below.
Expected Behavior.
image of how chart should work
Below I have attached the whole code I tried in Codepen.
Link to Minimal Reproduction
https://codepen.io/rushaidrilaf/pen/bGKONRj
I was able to Solve this. Started to resolve it by pointing the dragging function to 2nd point in the graph and updating the position of circular graphical element while dragging the horizontal line.
solution can be viewed from this link
https://codepen.io/rushaidrilaf/pen/bGKONRj
enter code here
In this fiddle what I'm after is giving all the 0s in the YAxis a grey colour without affecting the numbers that are bigger than 0. The issue here is that they are contained in the same SVG tag: <tspan>3000</tspan>. Is there a way I can target a particular text value inside a tag using css? i.e.
tspan[0]{
color: #808080;
}
Or is there a way I can do that using Highcharts' yAxis.labels.formatter ?
This is totally hacky, but I got it to work. Under yaxis:
labels: {
formatter: function () {
var label = this.axis.defaultLabelFormatter.call(this);
label = label.replace(/(0+$)/,'<span style="color: #ccc;">$1</span>');
return label;
}
},
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value
I would like to place orange dots like such on a highcharts:
http://www.dev2one.com/econometering/highcharts/graph-conso.jpg
Any suggestion how to make them ? and style them too
Thanks alot
Regards
The first place to look is the Highcharts API which you can find here:
http://api.highcharts.com/highcharts
To remove the lines and format the marker, you need to look at the plotOption.line. In your fiddle, you have added the lineWidth: 0, to the marker but you should have added it to the series like this:
plotOptions: {
series: {
marker: {
fillColor: '#F27D00',
},
lineWidth: 0,
}
},
http://jsfiddle.net/dqepok9d/1/
How to set and keep FT Layer polygon style options when setting certain polygons' colour on-click?
Dr Molle kindly helped me out with toggling polygons from a FT, but I want to set the opacity/colour of the initial FT layer polygons - this is easy with
styles: [{polygonOptions: {fillOpacity: 0.2,fillColor:"#00FF00",strokeWeight: 1,}}]
but as soon as a clicked polygon has its colour set via
layer_0.set("styles", [{
where: "'Postcode district' IN('"+vals.join("','")+"')",
polygonOptions: {
fillColor: "#000000"
}
}]);
it resets the 'default' back to the ~50% opacity red.
Below is the altered jsfiddle from Dr.Molle
http://jsfiddle.net/yh2WX/
When you overwrite the "styles" property in the click listener, you need to keep the default setting
fiddle: http://jsfiddle.net/9N9p2/1/
layer_0.set("styles", [
{
polygonOptions: {fillOpacity: 0.2,fillColor:"#00FF00",strokeWeight: 1,}
},{
where: "'Postcode district' IN('"+vals.join("','")+"')",
polygonOptions: {
fillColor: "#000000"
}
}]);