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/
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
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 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