Highcharts border around legend symbol - highcharts

Is there a way to add a border to a highcharts legend symbol (in particular for bar or column charts). Notice how in this picture the border color of the bar doesn't match the border color of the legend symbol. I noticed that it's a current feature request, and the author seemed to have a workaround for border radius that involved modifying the highcharts js file. I'm not going to modify the highcharts library, but I'm willing to do a little hackery dynamically.

Related

How to create a single color pie chart in Tableau

I am creating a pie chart based on different room types in the market , when I take out the color marks , the pie chart would be just one color but without border showing pie chart with just one color
Even if you don't put anything in the color mark, you can change the color and color of the borders from there.
Click to the color mark and change the border from "Automatic" to the color you want for the borders :)

How to set different bar width in the same series Highchart

In my bar chart the point range is not equally, so I want to draw different widths for bar chart using highchart. However, all the solution is to draw different series. I wonder is there any solution to hack the code and only change the pointwidth inside one series?
Here is a screenshot
The easiest way would be to change width property of a column SVG element.
Example:
http://jsfiddle.net/6o7290uf/

How can I change the color of plot bands in Highchart basic column chart?

I opened the basic column chart using Highcharts and now I need to make little customization. I would like to change the color of the plot band that is visible when I place the mouse pointer within one category on X axis. I tried to use the xAxis -> plotBand option, but it only changes the color with specific start and end values. How could I change this color on mouseover?
This is some example, how I would like it to look: https://www.dropbox.com/s/ilxhd99xo8pwn7v/Zrzut%20ekranu%202015-09-05%2020.20.17.png?dl=0

HighCharts: SVG outside plot area

I am designing an HighCharts bubble chart (a matrix with coloured fields, drawn using SVG), that should have some text explaining the axis values outside of the actual chart area.
That is, because the axis values are A-E and need a lengthy explanation (A = Always exceeds goals bla bla etc.).
These explanations should be visible - next to the chart, not in it, and not in tooltips because these cannot be printed.
My question: Can I put SVG <text/> outside of the plot area? HighCharts seems to stretch the plot area as far as it can, leaving no space to either side.
You can use text text and define css styles i.e: position:absolute;left:20px;top:20px;

How to add negative area or background for a specific bar or pie chart in highcharts?

Using highcharts, how would I put a default grey bar under my column charts, for example, like this?
And how would I do something similar for a pie chart (if my data takes up 30% of the chart, show the remaining 70% as light grey or something similar to denote unused space of the pie chart)
For the Pie chart there has been a bit of a back and forth in the highcharts forums. What I would do is get all of your data you need to plot and find out what percentage of the total all of that data is. Then, with the remaining percentage create another data point and set its color to grey.
But you really have to consider what is the total percentage means - without further detail I cannot begin to guess.
As for the first question about "default grey bar under my column charts" it is not clear from that link what you mean. I do not really see what you mean with the charts I have looked at.

Resources