expected chart
Hi, I need to make this charts, looks like 3 charts in 1(?). I can make the 2 scatered ones, but the column charts its tricky. Thanks to Wojciech Chmiel I was able to make this columns charts with highcharts-vue, but the chart behaviour its a little odd, I cant add a yAxis, nor stop the chart from pushing to the top like a sort of responsive behaviour.
#Wojciech Chmiel
Hi, sorry for the delay. A columnrange chart with a bloxplot and 2 scatter
initChart (data) {
this.chartOptions = merge(this.getBaseChartConfig(ChartTypes.BoxPlot), {
xAxis: {
categories: data.periods
},
series: [
{
type: 'columnrange',
name: 'Observations',
data:data.peerGroupStatisticReturns.dataRange,
showInLegend: false
},
{
type: 'boxplot',
linkedTo: ':previous',
data: data.peerGroupStatisticReturns.values
},
{
type: 'scatter',
name: data.names[1],
marker: {
symbol: 'diamond',
fillColor: '#6598FD',
radius: 6
},
data: data.benchmarkReturnSeries.data
},
{
type: 'scatter',
name: data.names[2],
marker: {
symbol: 'square',
fillColor: '#FFCC33'
},
data: data.productReturnSeries.data
}
]
})
// chart settings
const boxPlotConfig = {
title: {
text: ''
},
plotOptions: {
boxplot: {
fillColor: '#0076C0',
medianColor: '#303030',
medianWidth: 1,
stemWidth: 0,
whiskerWidth: 0,
color: '#303030',
showInLegend: false
},
columnrange: {
color: '#66ADD9'
},
series: {
enableMouseTracking: false,
borderColor: '#303030'
}
},
yAxis: {
title: ''
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Now I have make the colors interspersed and move the markers so the dont overlap, one to the right inside the column and one to the left
Related
Is it possible to make the outliers color transition from light to dark? I am using box plot chart from Highcharts and want my outliers to render from light red to dark red. Any outliers above 100k needs to display in a darker red.
https://jsfiddle.net/samwhite/9amz3y7x/1/
Highcharts.chart('container', {
chart: {
type: 'boxplot',
zoomType: 'xy'
},
title: {
text: 'Boxplots for Buzz'
},
credits: {enabled: false},
legend: {
enabled: false
},
xAxis: {
categories: categories,
title: {
text: 'Stock Symbol'
}
},
yAxis: {
title: {
text: 'Buzz'
},
},
plotOptions: {
boxplot: {
fillColor: 'red',
// medianColor: '',
// stemColor: '',
// whiskerColor: ''
}
},
series: [{
name: 'Buzz',
data: box_dat,
color: 'red',
}, {
name: 'Outliers',
color: 'red',
type: 'scatter',
data: outliers,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: 'red'
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
You should use zones or color axis, but they only change point.color, which, in your case is replaced by marker.lineColor. Add the below plugin to allow changing line color by zones.
(function(H) {
H.wrap(H.Point.prototype, 'getZone', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.options.marker = {
lineColor: this.color
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sc2hk1b9/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have two series of data in my highchart and want to use "minPointLength" for only one of them. Is this possible to set? My series contains only: name, color and data. My chartconfig looks like this:
const chartConfig = {
chart: {
type: 'column',
dashStyle: 'ShortDash',
},
title: {
text: '',
},
xAxis: {
padding: 0,
plotLines: [{
dashStyle: 'shortDash',
}],
},
yAxis: {
opposite: true,
title: {
text: '',
},
gridLineDashStyle: 'dash',
},
plotOptions: {
column: {
borderRadiusTopLeft: 32,
borderRadiusTopRight: 32,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
},
enableMouseTracking: false,
},
series: {
pointWidth: 24,
minPointLength: 3,
},
},
};
What I want is to always show minimum height on one of the datasets. Even if the scale goes from 1 to 1 000 000, it supposed to be a little peak at the bottom if one of my columns shows 3 out of 1 000 000.
Yes, you can set a minPointLength property individually for each series:
series: [{
minPointLength: 80,
data: [...]
}, {
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/19nc8jv6/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
I'm trying to update the highchart line graph say every minute. something like shown in this link jsfiddle
Right now, I use a periodic javascript call to the function that draws the graph. The problem is that it starts to draw it from beginning.
Is it possible to just add the new data point to the existing line?
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php? filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
you should use the addPoint function in the data series...
here is an example of a chart that updates every second
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/
What am i working on is, to create a bell curve and a fill the curve with colour to show that you have got 50 % or 60 % etc.
What i have done till now is:
Created a bell curve using spline chart in highcharts, now I want to limit the colour inside the chart based on the user percentage. I have no idea how this can be done in the highchart, Could anyone point me in the right direction.
I have tried to change the colour based on the http://www.highcharts.com/plugin-registry/single/33/Multicolor%20series, but it have affected the bell curve.
Here is the fiddle link: http://jsfiddle.net/decs7eg1/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average score'
},
legend: {
enabled:false
},
xAxis: {
categories: [
'0',
'25',
'50',
'75',
'100'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
enabled:false
},
credits: {
enabled: false
},
plotOptions: {
enabled:false
},
series: [ {
name: 'Jane',
data: [0, 0.5, 2, 0.5, 0]
}]
});
});
You can't achieve the same output by using areaspline type of highchart
I am adding two demos one with using areaspline and other with simple line chart use according to your requirements:
areaspline: http://jsfiddle.net/decs7eg1/8/
line: http://jsfiddle.net/decs7eg1/7/
Vertical areaspline: http://jsfiddle.net/decs7eg1/10/
To do this just add these lines in your code:
zones: [{
value: 0,
color: 'red'
}, {
value: 0.5,
color: 'yellow'
}, {
value: 1,
color: 'blue'
}, {
value: 2,
color: 'green'
}]
For further references refer to this link: http://www.highcharts.com/docs/chart-concepts/series
I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.
Here is some of the code I've tried playing with:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.
Any help on this would be greatly appreciated!
Firstly, A js-fiddle example would be highly appreciate to understand your problem.
From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
my fiddled code # http://jsfiddle.net/U2Z2x/1/
Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle update # http://jsfiddle.net/U2Z2x/2/