I am trying to hide a vertical bar I have created in a jQuery Flot graph when the mouse is not within the bounds of the grid. I set me horizontal bounds for the grid as such: horizontalBounds = [leftOffset, plot.width() + leftOffset];. I then used an if statement to say "if the mouse is within the vertical bounds, do this to the verticalBar.css."
if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
if (typeof verticalBar !== "undefined" && verticalBar !== null) {
verticalBar.css({
transform: "translate(" + position.pageX + "px, 0px)"
});
}
Below is my css code (which is actually in my javascript file; don't ask...). What do I need to do to hide the verticalBar when the mouse is not within those horizontal bounds? I was thinking I could just add the attribute `visibility: hidden' to the verticalBar.css, but I can't figure out how to do that. Any hints?
verticalBar.css({
backgroundColor: "#F7E4E6",
width: "1px",
height: "100%",
position: "absolute",
padding: 0,
margin: 0,
left: 0,
transform: "translateX(" + plot.getPlotOffset().left + "px)"
});
}
try using "display:none;" in your CSS.
Depending on how you're wanting to hide the bar, you can have something as simple as display: none.
If you're wanting to add in some animations, you could use some jQuery functions to control that particular node.
You could also utilize a set of CSS class name swaps to trigger some CSS animations.
so none of those methods seemed to work for me. I ended up discovering that Flot has a crosshair plugin (flot.crosshair). The crosshair can be configured to act only on the x axis/ x coordinate as it tracks the movement of the mouse. Here is an example of the crosshair tracking in action: Flot Tracking Example.
Once the plugin was added, I was able to get the desired results; as the "vertical bar" only shows up when the cursor is on the grid. Below is really all you need to do to configure it (other than adding the plugin to the appropriate files). Hope this helps someone in the future.
plot = $.plot(
placeholder
data
grid:
clickable: true
hoverable: true
color: "white"
mouseActiveRadius: 1000
tooltip:
show: true
content: '%y'
crosshair:
mode: "x"
color: "#FFFFFF"
lineWidth: 1
Related
My issue is a little bit tricky. For the moment, I get to display a spinner until Mathjax equations are loaded in my HTML page. For this, I do :
<script type="text/javascript">
var targetSpin;
var targetHide;
$(document).ready(function() {
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};
targetSpin = document.body;
targetHide = document.getElementById('hide_page');
spinner = new Spinner(opts).spin(targetSpin);
});
</script>
<script type="text/x-mathjax-config">
//
// The document is hidden until MathJax is finished, then
// this function runs, making it visible again.
//
MathJax.Hub.Queue(function () {
spinner.stop();
targetHide.style.visibility = "";
});
</script>
Now, my issue is to get the same behavior, but for URL which contains anchors.
You can see this problem by clicking for example on a link which contains an anchor into the URL.
In this case, you won't see the spinner before HTML content displays : I would like to fix this issue but I don't know how to acheive it.
If someone could see a solution, that would be nice to tell it to me.
Thanks for your help
Use position: 'fixed'. This will keep the spinner in the center of the page, no matter if it is scrolled or not.
The spinner is present on your second example, but it is absolutely positioned at the top of your page.
try to use a CSS loader on MathJax_Preview class
CSS snippet
.MathJax_Preview {
display: inline-block;
width: 12px;
height: 12px;
background-image: url(https://anishmprasad.com/images/loader.gif);
background-repeat: no-repeat;
}
math{
display:none
}
demo jsfiddle here
I hope this way solves your problem
I have HichChart with subTitle. I want to style it, that one part of this text was on left and another on right side.
I've tried to do this using inline css and turn on html for subTitle.
Sample what I have
subtitle: {
text: '<b>This is</b> <span style="float : right !important;text-align: right !important;">the subtitle</span>',
floating: true,
align: 'left',
x: 100,
y: 60,
useHTML : true
}
But this doesn't help.
It is not optimal , but you can overwrite the css style like this fiddle
#container .highcharts-container .highcharts-subtitle {
width:calc(100% + -120px); /*customize this to your needs*/
}
Hope it helps
I added a right position to the subtitle so that it has a full width, otherwise your float does nothing, the only thing i don't understand is why i have to add the left position with the same value as x so that the "subtitle text" doesn't end up outside the chart.
this what i added
style: { "right":"10px", "left": "100px" }
if you want more margin to the right, just increase the right property
full fiddle here http://jsfiddle.net/h70sj57r/4/
and this is how it look like if i don't add the left position(again i have no ideea what calculations it does so that you need to add this) http://jsfiddle.net/h70sj57r/5/
I'm using Chartist.js in order to create a few doughnut charts. So far it's been pretty straightforward and easy to use, but I've been trying to create a border around the shapes for the last three hours (needless to say I'm unable to use the SVG stroke property since the plugin itself uses the stroke to create the donut effect).
Is there an in-plugin option to give the chart a border?
The way I'm creating the doughnut is really simple:
new Chartist.Pie('.donut-chart', {
series: [37.47, 62.53],
}, {
donut: true,
donutWidth: 8,
startAngle: 0,
total: 100,
showLabel: false
});
Of course any kind of help will be much appreciated!
EDIT: I've also tried using cdcarson's fork of the plugin (Pull request pending at https://github.com/gionkunz/chartist-js/pull/330) to generate the chart using filled shapes instead of strokes, but something seems to be broken
I "solved" it using a pie chart instead of a doughnut one, and adding strokes to the shapes. After that I created a function to append a cover for the fill:
function hideFillOfPie() {
$('.donut-chart').append('<div class="cover-fill"></div>');
var size = $('.donut-chart-holder').width();
$('.cover-fill').css({
'height' : size - 30 + 'px',
'width' : size - 30 + 'px'
});
}
$(document).ready(function() {
hideFillOfPie();
});
The parent of the chart must have set
position: relative;
And the CSS for the cover of the fill looks like this:
.cover-fill {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
background-color: white;
border-radius: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
z-index: 1;
}
How can I hide the ticks on the y-axis?
I currently achieve it by editing tick.format, as can be seen in this JSFiddle http://jsfiddle.net/DanielApt/bq17Lp02/1/
I'm not happy with this solution, as the y-axis label is being cut off
So how can I hide ticks without having y-axis label being cut off?
Thank you for your help in advance!
1) Try setting axis.y.tick.count to 1, so that no ticks are shown except top, and bottom most.
2) Or try CSS to get ride of all intermediate ticks except top and bottom one like:-
.c3-axis-y .tick {
display: none;
}
If axis label positioning is an issue try to position it somewhere else like:-
axis: {
x: {
label: {
text: 'X Label',
position: 'outer-center'
// inner-right : default
// inner-center
// inner-left
// outer-right
// outer-center
// outer-left
}
},
Here is the working code:-
http://jsfiddle.net/chetanbh/24jkmvL5/
Reference Url : http://c3js.org/samples/axes_label_position.html
In case someone still needs it, I put it in onrendered callback to avoid affecting all charts:
onrendered: function() {
d3.select("#myChartContainer").selectAll(".c3-axis-x .tick line").style("display", "none");
}
In the end I used a combination of Chetan's answer and some further work:
I hid the ticks with:
.c3-axis-y .tick {
display: none;
}
And I set the tick format:
axis.y.tick.format = function(){return 'fy'; }
//return characters with both ascenders and descenders
See this JS Fiddle http://jsfiddle.net/DanielApt/etuwo8mz/1/ for the solution in action.
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
No CSS setting helped and no higher z-index setting helped either.
Here is my example... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
Thank you.
This css helped me:
.highcharts-container { overflow: visible !important; }
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
Here is what I did and what I suggest everyone to try:
Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:
tooltip: {
useHTML: true
}
Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):
Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
Quite simply this means setting this one value to true, for example:
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.
Adding simply this CSS worked in my case (minicharts in table cells):
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
I recently got the same problem, but with bootstrap container ! (bs3)
None of those solutions worked but I found by my own.
Its due to bootstrap _normalizer properties
svg:not(:root) {
overflow: hidden !important;
}
So add both :
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
Tooltip options:
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS:
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
None of the solutions worked for me. When the tooltip was bigger than the chart it simply didn't show.
Eventually we realized that Highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:
.highcharts-tooltip-box {
visibility: inherit !important;
}
After that overflow still need to be set to visible:
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
And make sure to set the z-index higher in the container if you're having any problems.
I would just like to add an example and prove that .highcharts-tooltip-box
doesn't have to be set for overflow to work.
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
Demo:
https://jsfiddle.net/BlackLabel/3fubr1av/