HighCharts Semi Circle dial that positions correctly - highcharts

While I have found this post that advises how to change the gauge chart to a semi circle...
How to create a semi circular gauge using high chart?
It's a bit of a faulty design as all we do is shift the chart down ward. This leaves a bunch of white space...
Does anyone know how to do this, while keeping the dial chart centered?

You can play a little with width: and height: of the container and with pane size:, see: http://jsfiddle.net/EjRLw/631/

Related

I want to add border radius in stack graph in high charts for some particular data

enter image description here See in the example, when I don't have blue data then border-radius should come on black part in the last case. How I can achieve that??
Add border radius on black part if blue is hidden
The problem here is that setting a borderRadius for a single point is not possible according to Highchart's API. You can only set a borderRadius for the whole series. Splitting your points into several series would work, but I'm not sure if the whole demo still makes sense.
API reference: https://api.highcharts.com/highcharts/series.bar.borderRadius

Reduce white space below plot area without using negative marginBottom

I want to reduce the area between the plot area and the border without using negative marginBottom because if I use that, the plot area covers up my border( both plotBorder and border), so is there another way to do this?
You can try adding the following CSS to the box you wish to move:
bottom:-100px;

Highchart bubbles with arrows inside

I want to draw a bubble chart using Highcharts with an arrow or a pointer that points to a certain position on the circumference of the bubble depending upon a data value.
Think of it like this: each bubble is like a gauge without any calibrations. It has just a dial which points to a single point on the bubble surface, preferably on the inside.
This is an example image of the bubble for reference:
Is this possible? Or am I reaching?
I got an answer from the Highcharts forum where I'd posted the same question:
http://forum.highcharts.com/highcharts-usage/bubble-charts-with-arrow-pointers-t36575/

How to make color bar above navigator in Highstock?

I have chart showing time data. I have two points back in time which I need to "mark" in the chart.
I currently indicate these two by plotlines, but would like to show bar, with let's say green and blue bars showing the timespans (for example -13days from now with blue and -90days -> -13days with red).
I would use plotBands, but I can't specify their height and do not want to have them all over the chart.
Is there some way? I saw something about translating pixels and drawing rectangle, but wasn't able to make it work. Also - I zoom a lot in this chart.
You can use Renderer and add custom shape. In other cases, please attach mockup of your goal.
http://api.highcharts.com/highstock#Renderer

Shading areas in coreplot, with outlined line

Does anyone know how to achieve this in coreplot?
I can get the graph with the solid green and red lines, without the shading. And I can get the semi-transparent shading, without the solid green and red line. I cannot seem to get both. :)
You should be able to do this with only two plots, one for each color. Set both the dataLineStyle and areaFill for each plot. Be sure to set the areaBaseValue for each plot at or below the bottom of the plot so the fill extends all the way down.

Resources