I have a population pyramid using the rCharts-highChart library implementation presented in here. I am trying to add a layer of bubble chart over the population pyramid. I have partial success in implementing it. The image below shows the chart I achieved.
enter image description here
I am not able to control some attributes of the bubble chart. I want datalabels to be displayed on the the bubble chart. However, the dataLabels are activated for the bar chart only. I want the dataLabels to be displayed on the bubble chart also. The code I use is below.
n1 <- hPlot(x = 'Agec',
y = 'Category',
type = 'bar',
group = 'HbA1c_levels',
plotBorderWidth = 1,
data = MyD.melt)
# Adding a series of bubble chart
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$low)))
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$high))))
n1$plotOptions(series = list(stacking = 'normal', pointPadding = 0, borderWidth = 0, dataLabels = list(enabled = TRUE)))
#dataLabels gets activated only for bar chart as shown in the figure
Further, the bubblechart is able to read the 'Y axis' when I specify a particular column from the dataframe as shown in the above code. I would want it to read the "X,Y,Z,name" attributes from a list or dataframe and then plot the bubbles. Any idea how it can be done?
Related
I'm using some different charts renderer in Highcharts drilldown. In some cases, my first level is a column chart and the second (or third...) level is a pie.
Everything is working well except some specified settings for the axes (title, color/width) that appear in the pie chart. The expected behavior is entire axis are hidden in case of pie chart.
As example, in the following : https://jsfiddle.net/vegaelce/w3crqofu/ I would like the axis lines and titles to be hidden in the pie drilled charts.
When using a pie in the first level by setting the type as for the second level :
type: 'pie',
the axes are correctly hidden.
You can use the drilldown and drillup callbacks to customize your chart options, like:
events: {
drilldown() {
const chart = this;
chart.title.hide()
chart.axes.forEach(axis => axis.update({visible: false}, false, false))
chart.reflow()
},
drillup() {
const chart = this;
chart.title.show()
chart.axes.forEach(axis => axis.update({visible: true}, false, false))
chart.reflow()
}
}
Demo: https://jsfiddle.net/BlackLabel/3ac9hrfj/
API: https://api.highcharts.com/highcharts/yAxis.visible
I'm using ChartJS to plot a dataset to a bar chart. When I hover over the bars the name of the series with values will appear, so far so good.
However in my application it's possible that I get back a single group (one serie) from my database call. When I hover over the single bar the name of the serie and value is missing.
Preferred output would be the same as image 1 with only the single serie displayed. How to achieve this?
code to watch for data and push to dataset for chart. No custom options are set.
$scope.$watch("obtainedVouchers|groupBy:'voucherTitle'", function(collection){
if (!_.isEmpty(collection)) {
$scope.voucherChart_data = [];
$scope.voucherChart_label = ["Ingeleverde vouchers"];
$scope.voucherChart_series = [];
$scope.voucherChart_colours = ["#43A7BF", "#5ADFFF", "#163840", "#2D6F7F", "#51C8E5"];
for (var key in collection) {
var x = collection[key].length;
$scope.voucherChart_series.push(key);
$scope.voucherChart_data.push([x]);
}
}
}, true);
Multiple serie chart
data collection
Single serie chart
data collection
I often have charts that require a design element like a curly brace to call attention to call attention to a range or comparison in a graph, such as the y-difference in two points at the end of a graph.
My first take is that this would be a job for Highcharts Renderer API. Load the graph, and run a callback that adds an image (or line, shape, whatever) via chart.renderer.image(...) or similar.
That's the approach I have started down, but I'm just missing how to get the coordinates for chart data points within the callback. Here's a working codepen of the code below. What doesn't work is that there's no logic to give it proper placement on the canvas (suppose I want the bracket to go from the final top point to the final bottom point)
$('#container').highcharts({
data: { table: document.getElementById('datatable') },
chart: { type: 'line' },
title: { text: 'Data extracted from a HTML table in the page'
}
}, function(chart){
var img = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Curly_bracket_right.svg/30px-Curly_bracket_right.svg.png';
// How can I populate these values?
var x = 0; // should programmatically get x-position of last point
var y = 0; // should programmatically get y-position of last point
var h = 100; // should programmatically get distance between y-position of top and bottom points
var w = 50;
chart.renderer.image( img, x, y, w, h ).add();
});
Is there a straightforward way to populate those values? Or is there a better way to do this entirely?
to get the position you want you can use few methods provided by highcharts in their API.
methods like toPixels(), toValue() will help you to alter your required position as per the chart demogrphics.
please refer their api
toPixels() : http://api.highcharts.com/highcharts#Axis.toPixels()
toValue() : http://api.highcharts.com/highcharts#Axis.toValue()
hope using this will solve your requirement of positioning
I'm using DotNet.HighCharts and am very pleased with what it enables me to do so far. However, I cannot get it to position labels on the inside of a donut / pie chart. It appears that the distance attribute is not available for the DataLabels. Does anyone have a workround?
Alternatively, does anone know how to write text onto the top of a chart at a specific position (relative to the container of course)?
It's possible to use Distance property in the DataLabels:
DataLabels = new PlotOptionsPieDataLabels
{
Formatter = "function() { return this.y > 5 ? this.point.name : null; }",
Color = Color.White,
Distance = -30
}
Also you can see how is used in the sample project. Download from here: http://dotnethighcharts.codeplex.com/releases
My question is similar to the one in
Highcharts: Show special marker on column chart
I have a column chart, which is a histogram of mutual fund returns in a specific period.I want to highlight where the Mutual Fund of interest falls with a special marker.
Say for example, i have -50 to -25, -25 to 0, 0 to 10, 10 to 20, 20 to 30, and 30 to 50 on my x axis, and corresponding Y values. I want to highlight with a marker on '20 to 30' to show that the Mutual Fund of interest falls into that bucket. I know we can do this using spline chart like http://www.highcharts.com/demo/spline-symbols.
Is there a way to do the same for column charts ??
In general you can't add custom marker to the column chart, but you can add similar behavior. I've created simple example with custom marker for scatter series, useful if you want to add more series into legends: http://jsbin.com/oyudan/37/edit (if not, just set showInLegend: false)
Highcharts.updateMarketMarkers = function (chart) {
/* get category width */
var catWidth = chart.xAxis[0].width / chart.xAxis[0].categories.length;
/* get padding of each column (two sides) */
var catPadding = chart.series[0].options.pointPadding * catWidth;
/* actual value - padding - symbol width/2 */
chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r / 2);
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
showAxes: false,
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
...
Another solution is to use Highcharts renderer to draw custom shapes at specific place. Here you can find more about renderer: http://api.highcharts.com/highcharts#Renderer