Is there any way to draw Yaxis lable using highcharts/highstock api? The value of the label will be the end value of the series. The color will be the same color of the series.
I found there is a renderer api, but is seems it is difficult to know the exact position of the point.
Here's an older example that uses the renderer function:
http://jsfiddle.net/jlbriggs/4FrGG/4/
function(chart){
$(chart.series).each(function(i, serie){
//to get the appropraite 'y' position
var point = serie.data[serie.data.length-1];
chart.renderer.text(
//the text to render
'<span style="font-weight:bold;color:' + serie.color + ';">' + serie.name + '</span>',
//the 'x' position
chart.plotLeft+chart.plotWidth+5,
//the 'y' position
chart.plotTop + point.plotY+3).add()
});
});
You could also do it by using data labels, enabled for only the last data point:
http://jsfiddle.net/jlbriggs/zXLZA/0/
You could also do it now by using the 'tickPositions' property, and then the formatter function on the axis labels
http://api.highcharts.com/highcharts#yAxis.tickPositions
http://api.highcharts.com/highcharts#yAxis.labels.formatter
Related
Context
I am trying to replicate amCharts 4 Auto-adjusting chart height based on a number of data items with amCharts 5 instead.
Code pens with console logs:
amCharts 4: https://codepen.io/jackfoo/pen/XWeoNdW
amCharts 5: https://codepen.io/jackfoo/pen/MWEZKbX
The very first time the callback for the datavalidated event of a CategoryAxis is executed, CategoryAxis.height() returns a value that seems wrong. I don't know if the axis was actually rendered before the first datavalidated event. If it was not, then I guess it does not make sense to call CategoryAxis.height().
For information, the very first time the callback is executed, the property inited is false.
Question
The very first time the callback for the datavalidated event of a CategoryAxis is executed, what is CategoryAxis.height() supposed to return?
amCharts have updated their tutorial now for version 5.
amCharts 5: Auto-adjusting chart height based on a number of data items
Now the height is set using
chart.root.dom.style.height = chartHeight + "px";
Some points to note is
amCharts 5 uses "root element" approach - you create a root element,
then add actual chart or series objects to it.
...
amCharts 4 did not
have a root element, so chart instance was the top element in the
tree.
...
amCharts 5 uses Canvas API as its method of rendering, whereas
amCharts 4 used SVG.
~ AmCharts 4 and 5
The full code is in their codepen... now the datavalidated event is on the series.
var cellSize = 30;
series.events.on("datavalidated", function(ev) {
var series = ev.target;
var chart = series.chart;
var xAxis = chart.xAxes.getIndex(0);
// Calculate how we need to adjust chart height
var chartHeight = series.data.length * cellSize + xAxis.height() +
chart.get("paddingTop", 0) + chart.get("paddingBottom", 0);
// Set it on chart's container
chart.root.dom.style.height = chartHeight + "px";
});
I have created a horizontally stacked bar chart after referencing multiple examples on D3 portal. I set out to to achieve following goals
Tooltip on chart
Mouse hover on legend to highlight corresponding data
Mouse click on legend to
3.1. Change opacity of legend (unselect effect)
3.2. filter data based on selection
3.3. with transition effects
Was able to get #1, #2 & #3.1 requirements satisfied except for #3.2 & #3.3 i.e. data filtering based on legend selection with transition effects.
Here's sample code where I need help with data filtering and transition code upon clicking legend. Complete code on Plunker
.on("click", (function(d){
var y = "sqbar color-" + color(d).substring(1);
console.log("Class =" + y);
var opacity = document.getElementsByClassName(y)[0].style.opacity;
console.log ("Old opacity =" + opacity);
if (opacity === "1") {
svg.selectAll(".sqbar.color-" + color(d).substring(1)).style("opacity", "0.2");
//svg.selectAll(".rect.color-" + color(d).substring(1)).remove();
}
else{
svg.selectAll(".sqbar.color-" + color(d).substring(1)).style("opacity", "1");
//svg.selectAll(".rect.color-" + color(d).substring(1)).d.enter().append();
}
opacity = document.getElementsByClassName(y)[0].style.opacity;
console.log ("New opacity =" + opacity);
}))
I have a an AmChart, JavaScript chart, column chart with scroll.
I'd like to be able to pull the category axis data for the min and the max values that are currently being displayed in the chart.
Example:
If I have 0-10 on the x-axis and I zoom to 4-6, I want to be able to reference the data on point 4 and point 6.
I am new to AmCharts so hopefully I am just missing something simple but I can't seem to figure this out.
Here is a link to a chart I made:
https://live.amcharts.com/U4YmV/
You can use the zoomed event to capture the startIndex and endIndex from its event object.
In the example below, zoomedData is the zoom selection.
chart.addListener("zoomed", zoomed);
function zoomed (e) {
var chart = e.chart,
data = chart.dataProvider,
zoomedData = data.slice(e.startIndex, e.endIndex + 1);
}
Please check the example here: https://codepen.io/team/amcharts/pen/246e8f826610e848b7389fb85657348a
I am working on dc.js, i have draw pieChart
pieChart.width(300)
.height(200)
.transitionDuration(1500)
.dimension(startValue)
.group(startValueGroup, "StartValue")
.radius(100)
.minAngleForLabel(0.5)
.legend(dc.legend().x(230).y(0))
.title(function(d) {
return d.key + ": " + d.value;
})
.renderTitle(true)
.on("filtered", function (chart) {
dc.events.trigger(function () {
//console.log(total_payment);
});
});
Now, I want to set specific x axis value. Currently, pieChart taking center position of define width and height. That mean it's taking position of (150,100). I want to change this position to (100, 100).
How can i change position of x axis as per above code?
You can't set this directly in the dc options, but you can modify these values after the chart has been rendered. Assuming that "pie" is the ID of the DOM element that you rendered the pie chart into, you can do
d3.select("#pie > svg > g").attr("transform", "translate(100,100)");
I know it is an old post and that the answer works perfectly but when the chart is part of a bigger system (several charts) I found easier to add the above command directly to the chart by doing this:
pieChart.on('renderlet', function (chart) {
chart.select("svg > g").attr("transform", "translate("100,100)");
});
Edit:
Actually I just found out you can do:
.cx(100)
.cy(100)
which will set the centre of the pie chart to 100, 100 before render.
The legend currently auto-sizes according to the max width of the labels it contains, which is throwing my layout. I need to set a width or min-width. Here is my legend creation method:
public Legend CreateLegend()
{
var legend = new Legend();
legend.Enabled = true;
legend.Font = new Font("Arial", 11F);
legend.ForeColor = Color.FromArgb(102, 102, 102);
return legend;
}
It seems like anything I do which accesses the Position object for the legend (defines X an Y coords, width and height) makes the legend disappear completely.
So legend.Position.Width = 5 would make it disappear...
Okay, turns out that if you do not define all four properties of the Position object, it sets them to zero...so height was zero...so it disappeared. Awesome.