I'm trying to recreate a chart (the one below) using Highcharts. I'm using a basic bar chart, and I'm wondering if there is a way to get a vertical line showing the average of all the bars? I have the value calculated, I just need it to display as the picture shows. Can I do this using Highcharts?
Yes. You can add it as a plotline, like this:
yAxis: {
// ...Options
plotLines: [{
color: 'red',
value: '15', // Insert your average here
width: '1',
zIndex: 4 // To not get stuck below the regular plot lines or series
}]
}
See this JSFiddle demonstration.
Related
I am using ChartJS alongside the ChartJs annotation plugin. The plugin allows users to draw lines on a chart.
I am trying to draw a horizontal line on my line chart that ends at a specific value instead of extending all of the way to the end of the chart.
Here is what the chart is supposed to look like, it is the red line labeled 'Peak':
The line should end at the largest value in the data array. However right now, the horizontal line extends all of the way to the end of the chart as you can see in the fiddle below.
Here is the code for the annotation:
annotation: {
drawTime: 'afterDatasetsDraw',
events: ['click'],
dblClickSpeed: 350,
annotations: [{
drawTime: 'afterDraw', // overrides annotation.drawTime if set
id: 'a-line-1', // optional
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '1300',
borderColor: 'red',
borderWidth: 2,
// Fires when the user clicks this annotation on the chart
// (be sure to enable the event in the events array below).
onClick: function(e) {
// `this` is bound to the annotation element
}
}]
Is it possible to limit the width of the line like this?
Here is the fiddle
ChartJS and ChartJS Annotation
Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.
You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.
I found this weird behavior when I tried to apply individual colors to a column chart in a candlestick chart in highstocks.js.
I made a JSFiddle example, but all I changed from the original candlestick example was the values for the column (volume) chart from:
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
to:
volume.push({
'x': data[i][0],
'y': data[i][5],
'color': 'green'
});
So when I change the number of bars I push into ohlc and volume from 54 to 55 (instead of dataLength) the colors are suddenly not applied anymore.
Try for your self, with a 'small' number of bars (<55 for me) the green color is applied just fine, but for a larger number of bars (>=55 for me) the volume bars are black and not green.
How can I avoid this? I want the colors to apply regardless how many bars I am plotting of course.
(This is just a simple toy example, in my real application the number of bars are far greater and colored depending on rules.)
I found an answer on the Highcharts forum. I need to disable the dataGrouping to make it work. Adding the column series as :
{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits,
enabled: false
}
}
will make it all work. I see the volume bars don't plot at all for large timeseries though...
Using latest High Chart, I want to have a single line with red color when the line is below some y-value and green otherwise (See picture http://oi60.tinypic.com/1t0ftu.jpg). Currently this is achieved by concatenating green and red lines (ie. 2 data sets) like this:
series: [{
color: 'red',
data: [{x:1,y:3}
, {x:2, y:2}]
},
{
color: 'green',
data: [{x:2, y:2}, {x:3, y:1}]
}]
However, this introduces issues and I have to use 1 data set (ie. single series).
Can someone show me how to achieve this? Thank you.
You have two options:
use threshold option
use multicolor series plugin
I have the below chart which is fine, however I have to add values to have the top line in place. It is a constant value and will never changes, How can I make this purple line permanent and also adjustable by the user?
Solution:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5,
dashStyle: 'shortdash',
id: 'plotline-1'
}],
What you are probably looking for is a plotLine. You can have it set to some default value on load and then remove/add when the user changes the value that they want to display. Lots of ways to do this.
You can set two xAxis and linked purple series to one, but rest of series (area) to other.
Examples of multiple axis http://www.highcharts.com/demo/combo-multi-axes