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
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
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
I want to use two types of graphics in one, and the same categories in y-axis for both.
//My code
https://jsfiddle.net/cyt8caLz/
Thanks for your help.
To do this you can use the yAxis.linkedTo property. From the docs:
Index of another axis that this axis is linked to. When an axis is
linked to a master axis, it will take the same extremes as the master,
but as assigned by min or max or by setExtremes. It can be used to
show additional info, or to ease reading the chart by duplicating the
scales.
So you could do something like:
...
yAxis: [{ // Primary yAxis
max: 100,
gridLineWidth: 0,
title: {
text: null
},
tickInterval: 10
}, { // Secondary yAxis
title: {
text: 'Toneladas'
},
linkedTo: 0
}],
...
I work for a public school system and have been asked to emulate a dashboard like what Atlanta has. It features two charts that are occupying the same plot/chart area. On the left side of the chart is a bar graph, on the right side is what I'm assuming is a scatter graph. The link to this chart is here, the one on the left-hand side:
https://public.tableau.com/views/AttendanceandSuspensions1415/AttendanceDash?:embed=y&:display_count=no&:showVizHome=no#1
Is there a way to do this in Highcharts?
Yes. You can set multiple y axes, and set their positions.
Then you assign each data series to one of the axes.
Example:
yAxis: [{
left: 120, width: 200,
},{
offset: 0,
left: 345, width: 200,
}]
.
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
type: 'scatter',
data: [...]
}]
Example fiddle:
http://jsfiddle.net/jlbriggs/j0eq21du/
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],
]
}]
});