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/
Related
How to extend plotline along with value outside the grey background or outside the chart area using highchart.
Demo : https://jsfiddle.net/mncfy80p/
Wanted to customize chart like below image.
https://i.stack.imgur.com/xbHGh.pngenter code here
You can increase the space occupied by xAxis and use plotBands instead of plotBackgroundColor property.
xAxis: {
labels: {
enabled: false
},
lineWidth: 0,
tickLength: 0,
max: 3,
plotBands: [{
color: "#D3D3D3",
from: -1,
to: 2.5
}]
}
Live demo: https://jsfiddle.net/BlackLabel/7jcqek36/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.
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/
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.
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