I want to make a solid gauge using High Chart but I want my yAxis min value to be anything but zero. Whenever, I change the value, the label disappears. Is there a way to make the label appear again? Or maybe someone has an alternative way to make those labels.
In my project, I will have to change the min amount dynamically, depending on user's settings.
Here's a fiddle sample:
jsfiddle.net/TH2aB/1/
You can get the label back by specifying startOnTick:true,
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
startOnTick:true,
title: {
y: -70
},
labels: {
y: 16
}
},
http://jsfiddle.net/yU7EM/
You can also explicitly set the tick positions using the tickPOsitions option:
tickPositions:[10,200],
http://jsfiddle.net/L6vVr/
Related
I would like to set my area range (the blue horizontal bar) only on the red bar (fidding the width of the red bar) but I cannot find a solution to do this. Plot band don't work because it's full width on x axis. Could you help me please ?
On this try I managed to set the area range (blue horizontal bar) but it created another entry on X axis ("1"), I want to keep only the first entry "Omburu" with the same disposition of yellow, orange and red bar. With additionnal horizontal blue bar on the red bar who is set between to values following "Puissance kW" scale.
The JSFiddle is here : https://jsfiddle.net/poloh11/1qzfgopy/11/
Thanks a lot
{
name: 'Range',
data: [
[1000, 1500],[1000, 1500]
],
type: 'arearange',
lineWidth: 0,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
marker: {
enabled: false
},
yAxis: 1
}
Use columnrage series instead. It has common properties with column series (pointRange, pointPadding etc.) that allow to adjust it similarly. The following configuration works for me:
{
name: 'Range',
data: [
[1000, 1500]
],
type: 'columnrange',
lineWidth: 0,
color: 'rgba(149,206,255,0.7)',
marker: {
enabled: false
},
yAxis: 1,
pointPlacement: 0.3,
pointRange: 0.33,
borderWidth: 0
}
Live demo: https://jsfiddle.net/BlackLabel/9czvmhsx/
API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/
What am trying to achieve is to have y values of percentage such that it the percentage value of 100 shows high and not starts at 100
example
I have some data
data:[100, 100, 100 .....]
When i draw a high charts with
series: [{
name: 'Percentage Compliance',
data: data //the values of percentage
}]
Am getting a chart of the following
What i wanted it to have is have ranges and have the 100% line be at the top not at the bottom.So have a y axis with 0,10,20
,30% ... buit the line to draw at 100%
What else do i need to add.
just include min and max in your chart like
yAxis: {
max: 100,
min: 0
},
Define your yAxis:
yAxis: {
min: 0,
tickInterval: 10
}
I'm trying to move the x-axis labels so that they appear along the line x=0. The scales are constantly changing, so I don't want to set the location using pixels, as y=0 may not be in the same location for each plot.
I tried looking up this question on this site and someone recommended using "crossing:0," as shown below, but that doesn't work.
xAxis: {
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
crossing:0,
title: {
text: 'some value',
},
If someone could help me with this positioning, I would appreciate it.
Here's my JsFiddle: http://jsfiddle.net/z7eyv/35/
crossing is not an out-of-the-box feature of Highcharts.
Based on what I could find, it seems what you want is the "Crossing-Specific-Value" Highcharts plugin, which is located here: http://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
Update (July 5, 2016): To address the comments about your fiddle, you need to explicitly add the "Crossing-Specific-Value" plugin after your bring in the Highcharts library (see the third line below):
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>
Now, adding the crossing variable to your x-axis will show the labels as in the demo.
I made a few tweaks to your fiddle (see http://jsfiddle.net/brightmatrix/z7eyv/38/) to better suit what you're asking.
1) Using the demo as the default, it seems that the plugin puts your labels above the axis line. I've seen instances where the labels are better ready below the line so I did the following:
xAxis: {
crossing: 0,
opposite: true,
min: -20,
max: 20,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
title: { text: '' },
labels: { y: 15 } // pushes the labels down below the crossing line
},
2) I then adjusted the plot line for the y-axis as follows:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: { text: 'some value' },
plotLines: [{
value: 0.1,
width: 1,
color: 'black',
zIndex: 10 }] // moves the plot line above the axis gridline
},
The zIndex value of 10 means the line will show up on top of the normal gridline. Here's how this looks:
Please let me know if this better answers your question.
Looking at the radial gauge control.was wondering if it would be possible to make it to look like the following picture, without the needle?
You can get pretty close doing:
$("#gauge").kendoRadialGauge({
pointer: {
// Current value
value: 0.72
},
scale: {
// Start and End angle of the Gauge
startAngle: 0,
endAngle: 180,
// Make range wider and with units inside
rangeSize: 40,
rangeDistance: -10,
// Configure major and minor unit
minorUnit: 0.05,
majorUnit: 0.25,
// Make major ticks same size than minor ticks
majorTicks: {
size: 10
},
// Define min and max (0% - 100%)
min: 0,
max: 1,
// Labels outside the range and number as percentage with no decimals
labels: {
position: "outside",
format: "p0"
},
// Color ranges
ranges: [
{
from: 0,
to: 0.45,
color: "red"
},
{
from: 0.45,
to: 0.80,
color: "yellow"
},
{
from: 0.80,
to: 1.00,
color: "green"
}
]
}
});
Some differences are:
The pointer is solid, you can configure the color but not the border:
There is no "Average" annotation.
You can see it here : http://jsfiddle.net/OnaBai/sThK3/1/
This is quite an old question, but there is a working answer here:
Give a Linear Gauge custom labels
Is it possible to have static tick marks equally apart even though the difference between the tick marks are not equal? For example here is how I have my yAxis set up in a column chart:
yAxis:
{
min: 0,
title:
{
text: 'Velocity (in/sec)'
},
labels:
{
overflow: 'justify'
},
tickPositions: [0.01, 0.10, 1.00, 10.00]
}
I want 0.01-0.10 to take up 33% of the graph, 0.10-1.0 to take up 33%, and 1.0-10.0 to take up the remaining 34%, with the columns falling into place according to their values.
I have some JPGraphs that have this functionality and am hoping it can be transferred to highcharts.js.
Sounds like you just want a logarithmic axis.
yAxis: {
type: 'logarithmic',
min: 0.01,
max: 10
},
Here's a fiddle example.
AFAIK Highcharts does not support automatic creation of histograms, but you can add a category to the xAxis with the desired labels, and then create arrays of data to match these.
xAxis: {
categories: ['0.01', '0.10', '1.00', '10.00']
},
series: [{
data: [10, 52, 1, 0]
}]
http://api.highcharts.com/highcharts#xAxis.categories