0

enter image description here

I need to create a chart using Highcharts like on the picture above.

So, I need to know:

  1. How can range selector buttons be positioned like in the picture? or is it possible?

1.1 If range buttons are impossible to position like that, can I use simple html buttons? and in that case how can I interact with Highcharts data.

  1. What is the name of the chart with a bar within a black circle and red to green gradient (gauge?).
mhatch
  • 4,441
  • 6
  • 36
  • 62
Aren Hovsepyan
  • 1,947
  • 2
  • 17
  • 45

2 Answers2

0

Taken from this question:

setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.

For Chrome, use -webkit-appearance: slider-vertical.

For IE, use writing-mode: bt-lr.

For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

You're welcome to view the code at the original question.

About the gradient thing, it can be easily accomplished by setting the background with css to a linear gradient. The full code:

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 20px;
    height: 175px;
    padding: 0 5px;
}
.gradientbg{
    background: -webkit-linear-gradient(green, white, red);
    background: -o-linear-gradient(green, white, red);
    background: -moz-linear-gradient(green, white, red);
    background: linear-gradient(green, white, red);

}
<input class="gradientbg" type="range" orient="vertical">
Community
  • 1
  • 1
NonameSL
  • 1,405
  • 14
  • 27
  • thanks for answer, I know about CSS gradient, I need to know name of that charts type. also please read it carefully, what you answered is useless for this question. – Aren Hovsepyan Oct 11 '16 at 16:40
0
  1. No API for that.

1.1. HTML buttons could call setExtremes() on a chart's xAxis.

  1. It's not a series type. It's colorAxis. However, you have provide just a static image, so it might be something else.
Kacper Madej
  • 7,846
  • 22
  • 36