Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
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'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});
Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/
I have a graph which looks like:
http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=ImVcaOUrw9RZ8M:&imgrefurl=http://peltiertech.com/WordPress/stack-columns-in-order-of-size-with-vba/&docid=Wy54Uzfs1JDBAM&imgurl=http://peltiertech.com/images/2009-05/StackChart4.png&w=502&h=331&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=271&vpy=229&dur=1078&hovh=182&hovw=278&tx=195&ty=91&sig=113812968337335397921&page=1&tbnh=132&tbnw=199&start=0&ndsp=10&ved=1t:429,r:1,s:0,i:77
But I want a graph which looks like: http://www.google.com/imgres?hl=en&sa=X&biw=1148&bih=538&tbm=isch&prmd=imvns&tbnid=NFn2T8iaojOpvM:&imgrefurl=http://peltiertech.com/Utility/ClusterStackUtility.html&docid=_9NYGInExJfrmM&imgurl=http://peltiertech.com/Utility/pix/clusterstackcolumns.png&w=282&h=207&ei=4fxlUOLCFMzSigLesIGYDQ&zoom=1&iact=hc&vpx=509&vpy=237&dur=85&hovh=166&hovw=226&tx=52&ty=80&sig=113812968337335397921&page=1&tbnh=150&tbnw=203&start=0&ndsp=10&ved=1t:429,r:2,s:0,i:80
* ABOVE ARE JUST AN EXAMPLE OF THE GRAPH TO SHOW WHAT I WANT. NO INTENTION COPYING ANYTHING. THESE ARE RANDOM IMAGES FROM GOOGLE SEARCH.
Thanks
There are various options available in the highchart yAxis object, allowing you to customize it in almost any & every way.
yAxis: {
gridLineWidth: 0,
// tickColor: 'black',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
labels: {
align: 'right',
x:-10,
y:5
},
lineWidth:1,
// lineColor:'black'
}
I highly encourage you to have a look at the awesomely useful highcharts api
"Hiding grid line but retaining ticks | Highchart & Highstock" # jsFiddle