Is it possible to have highstocks make each individual pane have its own shadow, rather than the entire plot area? I tried putting the shadow options in the yAxis field but that does not seem to work:
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
id: 'OHLC',
//do it here??
chart: {
plotBackgroundColor: '#f2f6fb',
plotShadow: {
enabled: true,
width: 6,
offsetX: 2,
offsetY: 2
}
},
aaaand jsfiddler: http://jsfiddle.net/abbike18/Ww5Tg/7/
Only shadow for full plotting area is supported, see: http://jsfiddle.net/Ww5Tg/8/
You have two options:
try to use plotBands for yAxis, but this may not be sufficient
use chart.render.rect() to add rect where you have pane, with color/options you have to
Related
I am new to highcharts. Is there anyway I can achieve kind of chart functionality using highcharts in which series label are on top and y axis is drawn vertically as shown in this image
Chart
You just can build a chart with multiple y-axes and enabled inverted option:
chart: {
inverted: true
},
yAxis: [{
opposite: true,
width: '40%'
}, {
offset: 0,
opposite: true,
width: '50%',
left: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/4eow5np2/
API Reference: https://api.highcharts.com/highstock/chart.inverted
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I want to add different colours for parts of the bar based on partialfill.
At the moment when the partialfill is 0.5 (50%) it makes half of the bar darker green. Is there a way to define colour in bar based on percentage?
For example
0-49 make the partialfill red and the rest white.
50-100 make the partial fill green and the rest white
etc.
https://jsfiddle.net/sg0co5au/11/
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
colour:'#FF0000',
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.50,
color:'#469E5A'
},
],
dataLabels: {
enabled: true
}
}]
});
I see that the background rectangle is of class "highcharts-point highcharts-color-0 highcharts-partfill-original" with fill value #469E5A. Change that to "white" where ever you have defined its CSS.
The overlay on that is
<rect x="6.5" y="85.5" width="696" height="20" rx="3" ry="3" class="highcharts-partfill-overlay" clip-path="url(#highcharts-51rfx2r-4)" stroke="gray" stroke-width="1" fill="rgb(0,82,14)"></rect>
For the color by percentage use a variable to store the percentage like percent
if(percent<=49){
document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "red")
}
else if(percent>49){
document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "green")
}
You can change the color of the background box similarly using document.getElementsbyClassName()
Yes, you can set the color of your fill after the chart loads by checking against how much of the bar is filled.
First, set the chart options to a variable so you can refer to them later
var thisChart = Highcharts.chart('container', { /* your options here */ });
Next, after the chart loads, check to see whether the fill is below or above 50 (in this case, 0.5 to match the value you set in partialFill), and use the series.update() function (https://api.highcharts.com/class-reference/Highcharts.Series#update) to change the color:
if (thisChart.series[0].data[0].partialFill < 0.5) {
thisChart.series[0].update({
partialFill: {
fill: 'red'
}
});
} else {
thisChart.series[0].update({
partialFill: {
fill: '#469E5A'
}
});
}
I made a few minor changes to your code. First, I explicitly set the series fill color to the green you chose. Then, I set the color of your data to white. What this does is make the color of the partial fill to the series' color, and the other space to white. Then, when you check the partialFill value after the chart is drawn, if the value is below 0.5, the filled value will be red instead.
series: [{
name: 'Project 1',
borderColor: 'gray',
pointWidth: 20,
partialFill: {
fill:'#469E5A' /* default color of the filled part of the bar */
},
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.50,
color: 'white' /* color of the unfilled part of the bar */
}],
dataLabels: {
enabled: true
}
}]
See an updated version of your fiddle here: https://jsfiddle.net/brightmatrix/sg0co5au/46/
I hope this information is helpful for you.
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
I'd like to style my navigator columns in a Highstock chart to take up more horizontal space (be less 'gappy') but I can't seem to find the settings to do it.
You can control width of the item using pointPadding and groupPadding, for example:
navigator: {
series: {
type: 'column',
pointPadding: 0,
groupPadding: 0
}
}
jsFiddle demo
you can use following in your chart config:
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0
Turns out the navigator column widths are automatically calculated based on the values of pointPadding and groupPadding. This worked for me:
navigator: {
series: {
type: 'column',
pointPadding: 2,
groupPadding: 2
},
},