Is there anyway to allow highcharts overflow over plotarea?
Fiddle Bubbles clipped
Highcharts.chart('container', {
"chart":{"type":"bubble"},
"plotOptions":{"bubble":{"minSize":9,"maxSize":30}},
"xAxis":{"min":0},
"series":[
{"name":"Acero", "data":[[604807,9091,19235608]],"color":"#ff0000"},
{"name":"Xleado","data":[[189725,281,2006799]],"color":"#33A1DE"},
{"name":"Aleado","data":[[40261840,85391,156180]],"color":"#104E8B"}
]
});
SVG clip-path attribute is responsible for hiding some parts of the bubbles.
It can be easily disabled via CSS:
.highcharts-series {
clip-path: none;
}
Live demo: http://jsfiddle.net/kkulig/h5yymapp/
Related
I'm currently using a bar graph to display my data. In this div, my bar graph is sitting at 50% width. If the percentage of the bar is too large for the width, the text next to the bar that displays the percentage such as 10% shows in the bar graph itself. Which is fine, but with the using the same color css as the bar graph. In this situation it is hard to read the percentage.
I would like the percentage to use the same color as the bar graph but Is it possible to change the text to white only when this happens?
Here is a photo example:
Here is a code snippet of what i'm using to change the color of the text using plotOptions
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return ` <span style="color:${this.color};">${this.y} %</span>`;
}
}
}
},
Here is a link to my jsfiddle where the issue is re-created: https://jsfiddle.net/8g4uL0jm/22/
I think that a better idea will be to change the dataLabels color after their initializing, which gives us information about their positions.
Demo: https://jsfiddle.net/BlackLabel/af02bgs7/
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align !== "right") {
p.dataLabel.css({
color: p.color
})
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
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
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
I need the dataLabels to be always displayed at the right end of bar chart irrespective of the data value. According to the Highcharts API, the dataLabel position is adjustable only relative of its current position. Is there a way to change the datalabel position relative to the chart area?
You're looking for something like this?
If you make the labels HTML elements instead of SVG elements..
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
//Labels are easier to move around if we switch from SVG to HTML:
useHTML: true,
}
}
}
..it's quite easy to move them around using CSS:
.highcharts-data-labels.highcharts-bar-series {
/* Stretch the labels container across the whole chart area: */
right: 0;
}
.highcharts-label.highcharts-data-label,
.highcharts-label.highcharts-data-label span {
/* Disable the default label placement.. */
left: auto !important;
/* ..and put them along the right side of the container */
right: 8px;
}
https://jsfiddle.net/ncbedru8/
You can also position data labels in the render event:
events: {
render: function() {
var chart = this;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.dataLabel) {
p.dataLabel.attr({
x: chart.plotWidth - p.dataLabel.width
});
}
});
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/yt1joqLr/1/
API Reference: https://api.highcharts.com/highcharts/chart.events
I am currently using jquery ui tooltip and using the track:true option. It works perfectly, however I dont want the tooltip to track the mouse when moving vertical only horizontal
Any idea?.
$(function () {
$(document).tooltip({
items: ".entry",
position: {
my: "right bottom+50"
},
track: true,
content: function () {
return "<div class='hi'>This is a very nice entry! It's so pretty and I feel like I can touch it. This is just random filler text.</div>";
}
});})
I added the tooltipClass property to the tooltip as follows:
$(document).tooltip({
...
tooltipClass: "tooltip-position",
});
and added the following CSS to prevent the tooltip moving when scrolling vertically:
.tooltip-position {
top: 200px !important;
}
See here for a Fiddle