Develop Reference

Expected length error in Ractive/Paths.js demo

I'm trying out a simplified version of the pie chart demo from Paths.js' website at http://andreaferretti.github.io/paths-js-demo/, to understand how it works when used with Ractive. I have most of it working locally, except for one error that I've not been able to resolve.
A working demo is at https://codepen.io/alexlibby/pen/xjvOvQ - I am trying to get the country names and population figures to display over the relevant segment in the pie chart. At the moment, it is showing an error in the browser console, and that country names / population figures are not shown:
Error: <text> attribute x: Expected length, "{pie.sector.centroid[0]}"
I've researched what I think could be the issue (in that the value being passed to the centroid attribute is incorrect), but I'm struggling to understand what it should be. I've checked on SO and can't find anyone with a similar issue.
I'm also using a more recent version of Ractive and the Path.js Pie plugins - is it possible that this could be causing an issue? I have used Browserify to assemble the Node dependencies into one file - my source code starts on around line 5 in the JS section, and finishes at line 26.
Could someone please help point me in the right direction?

You have to use mustaches instead of single braces: x={{pie.sector.centroid[0]}} y={{pie.sector.centroid[1]}}

Highcharts - bar chart columns too thin with too many series

I am developing a angular2 application using highcharts, but i have a problem about showing a bar chart. I have applied their sample code of highcharts to my application. It works. But when i added extra series to the chart, the columns becomes unreasonably too thin. my result
I separately tried the sample code on JSfiddle with adding extra series to the code. It works however. ... workable example

I've recently faced a very similar issue and even posted a question about it.
The solution seems to be pretty easy - for me the problem was in outdated highcharts (5.0.8) and highcharts modules(exporting, boost, highcharts-more, heatmap) (v. 5.0.8), so if you cannot reproduce your local behavior in jsfiddle try setting particular version of highcharts libraries like I've done here.
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
However when I updated to highcharts 5.0.14 the problem disappeared.
Hope this helps!
UPDATE
The issue was with a boost.js module, in particular with seriesThreshold property was set to 10 by default (now it is 50). Please find a detailed answer with example here

If you don't mind scrollable high-chart then this issue can be resolved.
Instead of Highchart use HighStock library, it will provide additional "scrollbar" option which you can combine with X-axis max option to show the data properly.
Here is the Updated Link for same code
scrollbar:{
enabled:true
},
xAxis: {
max:0
// rest of the code}
This answer will be good help to go in details.

Chart.js plugins overlapping tooltips

I have two plugins, one which displays a horizontal line across a chart (example image show below) and one which displays a label inside a donut chart. In both cases when the tooltip is triggered for the base chart, it displays beneath (i.e. lower z-position) the plugin's drawing.
I know I can create a fully customized tooltip which might solve this problem, but wanted to know if there was a configuration I'm not seeing or a simpler solution.
I can post code if necessary, but didn't think it'd be useful.

I believe that you should have posted the code for clarity. Since you are talking about plugins, you have overridden at least one plugin method. One of the methods you have overridden is probably afterDraw. Overriding afterDraw would present the problem you mention, I believe. Try changing afterDraw to afterDatasetsDraw. Look at the docs for the plugin methods that can be overridden. You want the lines to be drawn before the tooltip is drawn, so drawing the lines right after the datasets are drawn seems like a nice solution. Maybe using beforeDatasetsDraw instead would be a nice solution too, depending on whether you would want the bars to be above the lines or not.

HighChart table with tooltip

Here we have code jsfiddle.net/zvgnq84v
Is it possible to add Highchart tooltip(for example). I mean not to implement myself, but just call internal ready HighChart functions.

I am not sure why you put up this question. But if you go through http://api.highcharts.com/highcharts#tooltip there is in-built functionality available for tooltip in highchart
May be I am missing something.

AmCharts serial chart trend-line click

I am using javascript amcharts v3 to generate trend like interface element. I use trendline class to create trend lines that mark certain events. I would like to handle trendline click event but there seems to be no way of doing it.
Has anyone come across this type of problem or do you have any idea how to work around this?
For trend line example I use this page. There is jsfiddle link in it.
Thank you for the time you spend reading my question.
Edit: JSfiddle example - > here

Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})
Which will bind a click to the chartdiv and then filter on all svg path objects that are the colour of the trendline, triggering the code if it matches.