I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
Related
I have an idea how I can improve the user experience by altering some of my charts. Basically I have a column chart, where I display some values per category. The last value I display is the average.
I want to display the average value as a dotted line in each category.
Paint picture of idea displayed as a single category
I have read the documentation more times than I'm happy to admit, but I have still not found a proper solution. My best attempt was to overload the circle symbol in the 'scatter'-series and then redraw it as an SVG.
Does anyone have an idea to how I should approach it? I feel the option must be there, and I'm just missing the forest for the trees.
Best regards,
You can use line series type with calculated data:
const averageData = [3.33, 3.33, 3.66];
const processedAverageData = [];
averageData.forEach((val, index) => {
processedAverageData.push([index - 0.4, val], [index + 0.4, val]);
// To create gaps between categories
processedAverageData.push(null);
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
series: [{
...
}, {
...
}, {
...
}, {
type: 'line',
data: processedAverageData,
dashStyle: 'dash',
marker: {
enabled: false
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/t3ejqvun/
API Reference: https://api.highcharts.com/highcharts/series.line
I'm trying to add SMA (Simple moving average) into my highstock with dataGrouping.
dataGrouping works fine without SMA. But when I add SMA it only group data on daily basis. Has anyone got the same problem?
I've checked the chart element and I can see the series & SMA object they all got the dataGrouping attribute but still not display properly in the chart.
I tried to add dataGrouping in both plotOptions.series & plotOptions.sma or add it in series respectively but none of them work.
let dataGrouping = {
forced: true,
units: [
['week', [1]],
]
};
const options = {
//...
plotOptions: {
candlestick: {
color: 'green',
upColor: '#e00000',
},
series: {
marker: {
enabled: false,
},
states: {
hover: {
enabled: true,
lineWidth: 1.5,
}
},
dataGrouping,
},
sma: {
dataGrouping,
}
},
}
My highcharts verion is 6.0.7
I also tried to add dataGrouping on an official example and here's the link: http://jsfiddle.net/tuuz4yho/8/
and here's another example with a simple line chart
https://jsfiddle.net/Lyf6vzev/19/
But dataGrouping still not work on SMA lines.
Anyone know how to group SMA weekly or monthly?
Really need your help!
Thanks! :)
Turns out it's a known bug:
https://github.com/highcharts/highcharts/issues/7823
The workaround is setting dataGrouping.approximation and dataGrouping.groupPixelWidth in the indicator config.
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
I have two datasets (red, blue) that have data starting in 9/11 and one (green) with data starting in 2/13. The green one is starting in the same location as the others, but it should start in 2/13. How can I tell this dataset to do that? I'd rather not use 0's if there is a way around it.
You can put JavaScript's null value if you don't have any value. My English may not be that much good to explain but my example is clear. Also you can look at that page: http://www.highcharts.com/demo/area-missing/gray
<script>
$(function () {
$('.graph').highcharts({
chart: { type: 'line'},
plotOptions: { series: { connectNulls: true }},
xAxis: {categories: [2012,2011,2010,2009] },
yAxis: {title: { text: 'Example Fruit Consumption'}},
series: [
{ name:'Apple', data:[null,null,20000,41000]},
{ name:'Orange', data:[29458,29000,26892,23256]}
]
});
});
</script>
You can define pointStart() http://api.highcharts.com/highcharts#plotOptions.series.pointStart for serie.
In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/