When useHTML is set to false, is it possible to set a text shadow with similar parameters as is possible with the text-shadow CSS property? In particular, can you offset the shadow relative to the text (e.g. to the lower right), or is it always just an outline around the text? The highcharts docs suggest that it's only possible to set an amount and colour (e.g. "textOutline": "1px contrast"), or in other words that you can't offset the "shadow"... it really is just an "outline" when useHTML is set to false. (There are reasons why I cannot just set useHTML to true in some situations.)
You can be sure that the documented options will work, the others are experimental. You should use shadow property or shadow method to add shadow to your data labels:
shadow: {
color: 'red',
offsetX: 0,
offsetY: 0,
width: 10
}
API:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#shadow
https://api.highcharts.com/highcharts/chart.shadow
Live demo: http://jsfiddle.net/BlackLabel/bcy6hwLq/
You should also consider using styled mode: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Related
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
What's the difference for 'pie'.
{legend: {enabled: true}}
and
{plotOptions: {pie: {showInLegend: true}}}
Legend; is an option which allows you to change all the settings about the legend. (color, border width, shadow, padding, margin etc.)
plotOptions.pie.showInLegend is a boolean if a particular serie is going to be shown in the legend or not.
Is there any way to draw icon/images/triangle anything inside the chart plot?
Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?
I tried to using the legends, but it's kind hard to add a new one just for it.
Thanks
Edit:
I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.
Does anyone know nice solution for it?
Use either labels or Renderer.
Add the following code at the end:
, function (chart) {
chart.renderer.text('▲', 0, 0)
.attr({
align: 'right',
zIndex: 8
})
.css({
color: '#73903B',
fontSize: '48px'
})
.add()
.align({
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -40
});
});
DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)
Reference:
http://code.highcharts.com/highcharts.src.js (credits part)
Other possible approaches:
Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
Use left, top in labels
Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)
This is the kind of thing easily found in the API.
I am having some trouble getting the Tooltip for a series to not exceed a fixed width. I would like to tooltip for the Notes to not exceed a certain width, but I don't want it to be a fixed width.
Here is a jsfiddle example. http://jsfiddle.net/mnucci/hsBSV/
If you mouse over the second note at the top, it will be way too wide.
I am also having a problem getting the tooltip to honor the useHTML flag or the Formatter function.
I also tried using a style setting like
.highcharts-tooltip span {
width:140px;
overflow:auto;
white-space:normal !important;
}
but this fixed the width to 140 even when there were only 10 chars and I don't want all tooltips to inherit this, only the note series.
You need to set useHTML as true
http://jsfiddle.net/hsBSV/1/
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.