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
Related
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 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],
]
}]
});
This question is regarding highcharts. Can we create something like this in highcharts? Pie chart on a scatter plot? Please have a look at the url https://www.dropbox.com/s/mcmzn0t0hz4s2x7/pieChartScatterPlot.png
I would draw a normal scatter plot first, then loop the points placing additional pie charts on top of them:
// initial scatter
series: [{
type: 'scatter',
name: 'Scatter Me',
data: [3, 2, 1, 3, 4]
}]
// in load event, loop our scatter series
// and add a pie chart at each point
chart: {
events: {
load: function(){
var chart = this;
$.each(chart.series[0].data, function(i,datap){
chart.addSeries({
type: 'pie',
minSize: 50,
size: 50,
dataLabels: {enabled: false},
data: [Math.random() * 10, Math.random() * 10, Math.random() * 10],
center: [datap.plotX-21, datap.plotY-21],
}, false);
});
chart.redraw();
}
}
}
Here's a fiddle and how it looks:
The one thing that's got me scratching my head is that I had to introduce a fudge factor to get the pie center to align with the points.
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/