I wanted to show Bar(column) chart using HighChart, but bar chart should show holo columns(transparent column with borders). For this purpose I set color and borderColor as follows
plotOptions: {
series: {
color: Highcharts.Color('#000000').setOpacity(0).get('rgba'),//'#000000'
borderColor: '#000000'
}
},
but it is not showing series symbol in legends, as shown in this jsFiddle. Is there anyway to show series symbol in Legends, keeping columns(bars) to appear holo(transparent with visible borders).
I am using ideas from Style by CSS from highcharts to customize the label
Fiddle link
css
.highcharts-legend-item * { /*for default case*/
fill: black !important;
}
.highcharts-legend-item-hidden * { /*when clicked*/
fill: gray !important;
}
The legend symbol is not showing because it's color has the opacity 0, the same as the serie.
Couldn't find anything that would allow you to set the color of the marker, but i have a workaround.
You can format the legend label with the symbol, here you can find some of those symbols http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm
Here is the code to hide the legend symbol when it's hidden and format it's label.
legend: {
symbolPadding: 0,
symbolWidth: 0.001,
symbolHeight: 0.001,
symbolRadius: 0,
labelFormatter: function () {
return "◼ " + this.name;
}
},
full fiddle here http://jsfiddle.net/hfuuocdw/2/
I fixed it by setting color and border color of each series, and then adding a css style for "fill" to be transparent, as shown in this fiddle.
.highcharts-series-group .highcharts-point {
fill: rgba(0,0,0,0)
}
Related
I am attempting to the css color of my legend for my treemap layout.
In my treemap legend I am only displaying the parent's name and color. I would like to do the same but make the parent's name the same color.
For example: low display in blue text, med-low display in green text; while still displaying the color circle next to it.
i've attempted this by using the legend labelFormatter function but it seems to have no affect on my legend.
here is a code snippet of what I tried:
legend: {
labelFormatter: function () {
return `<span style="color:${this.parent.color};"> <br/> ${this.parent.name}</span>`;
}
},
Here is a jsfiddle link to the chart :
The legend object cannot be nested in the chart object config.
Rendering the as a span needs to set the legend.useHTML to true, which allows rendering the legend label as outstanding HTML element which could be styled in this way.
Demo: https://jsfiddle.net/BlackLabel/dmy9uqbe/
legend: {
useHTML: true,
labelFormatter: function() {
return `<span style="color:${this.color};"> <br/> ${this.name}</span>`;
}
},
API: https://api.highcharts.com/highcharts/legend.useHTML
Is there any way to completely hide scrollbar's buttons which contain arrow?
In addition to this, is there any way I can set the position of scrollbar such as setting y value so that the scrollbar hovers on the chart?
Setting its color to transparent doesn't help.
scrollbar: {
buttonBackgroundColor: 'transparent',
buttonBorderWidth: 0,
buttonArrowColor: 'transparent',
buttonBorderRadius: 0
}
EDIT:
Even if I hide the elements, I cannot use the space left as the picture below.
You can manipulate SVG elements.
chart: {
events: {
load: function () {
var chart = this;
chart.scroller.scrollbarButtons[0].hide();
chart.scroller.scrollbarButtons[1].hide();
}
}
},
Example:
http://jsfiddle.net/fexw25Lz/
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/
Is there a way to influence the transparency of the bubbles in Highcharts bubble charts?
I was looking for a configuration comparable to area fillColor, but didn't find one.
I tried using rgba colors for the series, like so:
series: [{
color: "rgba(255,0,0,0.5)",
data: [
but that only made the border semi transparent.
Edit:
I just tried to use marker fillColor:
series: [{
color: "rgba(255,0,0,1)",
marker: {
fillColor: "rgba(255,0,0,0.1)"
},
but that doesn't influence the transparency
You can use fillOpacity parameter,
marker: {
fillOpacity:0.3
}
http://jsfiddle.net/g8JcL/116/
The easiest way would be adding a CSS property.
.highcharts-point {
fill-opacity: 0.8;
}
But this will be applied to all the bubbles.
Image 1
Image 2
I want to align left the label but when i do this, the label a stack on other like Image 2.
Please help me
This one works without fixed width:
.highcharts-axis-labels span {
left: 0 !important;
}
Since it uses the width of the biggest label and moves the smaller once by raising the "left" value, you can prevent that by setting it fix to 0. So no need of fix width or "align: left".
Update:
Labels "useHTML" setting must be set to true to work!
xAxis: {
labels: {
useHTML: true,
You can also set useHTML as true, use formatter for labels and then use CSS styles.
http://api.highcharts.com/highcharts#xAxis.labels.useHTML
http://api.highcharts.com/highcharts#xAxis.labels.formatter
EDIT:
http://jsfiddle.net/2QREQ/3/
xAxis: {
labels: {
//align: 'center'
useHTML:true,
formatter:function(){
return '<div class="label">'+this.value+'</div>';
}
}
},
CSS
.label {
text-align:left;
width:60px;
}
Give the green and the blue bar a container div/span. Then apply for both of the label and the container span/div a 'display: inline-block' css.
By doing so you would force the bars to 'give space' for the label.