Is it possible to gray out only title of hidden serie in highcharts legend (not the color marker)? Picture worth 1000 words.
As an alternative, a wrapping of Legend.colorizeItem which post-processes the legend items legendLine and legendSymbol to "undo" the setting of the hidden color:
(function (H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if(item.legendLine) {
item.legendLine.attr({ stroke: item.color });
}
if(item.legendSymbol) {
if ((item.options && item.options.marker) && item.legendSymbol.isMarker)
item.legendSymbol.attr(item.pointAttribs());
else
item.legendSymbol.attr({ fill: item.color });
}
});
}(Highcharts));
The elaborate code for item.LegendSymbol is to preserve any marker options that may be set. It mimics the default behavior of colorizeItem without considering visibles truthness.
See this JSFiddle demonstration of it in use.
You could apply CSS to style the legend to achieve your desired effect.
Specifically, take advantage of the highcharts-legend-item-hidden class that gets added on each legend item (i.e. after it gets clicked on to hide the series) to force the colour of the marker to stay the same colour.
For example, to ensure the legend marker of the first data series always stays as #ff6600:
.highcharts-series-0.highcharts-legend-item-hidden .highcharts-graph {
stroke: #ff6600;
}
.highcharts-series-0.highcharts-legend-item-hidden .highcharts-point {
fill: #ff6600;
}
Here's a demonstration.
Related
I wonder how to change the font color of drillUpButton text. I tried css to extract the element like: g.highcharts-button highcharts-drillup-button highcharts-button-normal text{color: blue;} However it doesn't work.
Button Picture
The drillUpButton API only provide how to change the theme of the button itself but has nothing to do with the text.
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 10,
x: 0
},
theme: {
color: "#5ab7f5",
fill: 'white',
'stroke-width': 2,
stroke: '#5ab7f5',
r: 5,
states: {
hover: {
color: 'white',
fill: '#5ab7f5'
},
select: {
fill: '#5ab7f5'
}
}
}
},
Here is the link for reference
If someone wants to avoid using CSS selectors, you can add CSS style to text button using style property.
theme: {
style: { color: "red" },
...
}
Use this selector:
.highcharts-button-box+text {
fill: red !important;
}
Example:
http://jsfiddle.net/vwdfceLz/
You didn't quite go far enough to tspan and you're using color instead of fill. You were also missing a couple "." when selecting the class.
Creating this rule seems to work
g.highcharts-button.highcharts-drillup-button text tspan{
fill: blue;
}
If you don't want to type all of that out .highcharts-drillup-button text tspan should work as well.
DEMO
You can change the color of the text by using the highchart drillup button css styling class to apply the color to the text. The reason why simple color:red property on it wont work because it is a svg created on the run and svg also sets the fill property for the text as well which overwrites the color. On top of that you need to force your custom class colors by using the !important keyword for each property set. So just add the following class in your custom css and you drillup button text will change.
.highcharts-drillup-button text{
color: red !important;
fill: red !important;
}
Hope this helps.
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
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.
Is it possible to style the combo box container using the Select2 jQuery plugin? I can successfully style the dropdown menu where autocomplete selections appear, but not the container where text is entered. Here's what I'm doing:
$(document).ready(function() {
$("#combo").select2({
data:[{id:0,text:'One'},{id:1,text:'Two'}],
multiple: true,
createSearchChoice: function (term) {
return { id: term, text: term };
},
containerCss: 'container',
dropdownCssClass: 'dropdown',
containerCss: {
background: 'green'
}
});
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
background: green;
}
.container {
background: green;
}
.dropdown {
background: red;
}
The container should be green, but it's not. Here's a fiddle.
Edit:
I noticed on the documentation page for the site (which is quite comprehensive) that every example of the kind I'm trying to do (hidden input field with dynamically loaded options) has the same standard style, like in my example fiddle. The version that originates from a select element, however, has rounded corners etc. If this means you can't style the container when using a hidden input, it's seems like an odd limitation.
Edit2:
#emmanuel has already provided a solution, but since I was actually after the border-radius, there was a bit more to do to get it working properly. After setting the radius on all corners, opening the dropdown results in rounded corners visible between the top of the dropdown and the bottom of the container, which is a bit ugly. You can do something like this to fix it:
$('ul.select2-choices').on("select2-open", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
});
});
$('ul.select2-choices').on("select2-close", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '5px', // or whatever
'border-bottom-right-radius': '5px', // or whatever
});
});
I think this will cause a problem, though, for any other Select2 combo boxes visible on the same page.
In order to add background color to container you have to put the rule to #s2id_combo. The problem is that ul.select2-choices already has a background and it's over container so you have to add:
ul.select2-choices { background: green !important; }
I'm trying to set a white border/line color on hover for the bubbles in the bubble chart. I am able to achieve that but,
1. on mouse out the white border/line color still stays and doesn't reset back to the default line color.
2. And how do i increase the width of the stroke outside the bubble?
Please help. Here is the demo:http://jsfiddle.net/JKLzy/17/
plotOptions:{
bubble:{
allowPointSelect:true,
marker: {
lineColor:'',
states:{
hover:{
enabled:true,
lineWidth:1,
lineColor:'white'
}
}
}
},
states:{
hover:{
marker:{
lineWidth:0,
lineColor:'white'
}
}
}
},
The reason it seems to stick to the white after hover ends is that in your code you've set the marker line color to lineColor:''. This is not a valid color. Remove it and your hover line effect should work correctly.
To adjust the width of the stroke just change lineWidth.
For example your finished plotOptions.bubble.marker-options could look like this:
marker: {
states:{
hover:{
lineWidth: 3,
lineColor: 'white'
}
}
}
See this JSFiddle demonstration.