Develop Reference

Make Tooltips not overlap in amCharts Scatterplot

I'd like to arrange tooltips to NOT overlap AND always be visible on a amcharts4 scatterplot chart.
The documentation reference
https://www.amcharts.com/docs/v4/concepts/tooltips/#Making_cursor_arrange_tooltips
A sample implementation showing that the tooltipText is placed on the series is not providing the needed effect:
https://codepen.io/whoweez/pen/NWqoMvm
The result needed is something like this:
https://drive.google.com/file/d/1OL5KR83MoNJqAck710EW_yoxfSbkr7EM/view?usp=sharing

how to synchronize multiple d3 charts when zoomed?

function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration

I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle

D3 line chart doesn't do transition while appending data to chart

I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated

In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();

Is there any way to show tooltip by default (without hover pie chart) on chartjs

I have implemented the chartjs. And used piechart. Currently tooltip shows on hover. Is there any way to show the tooltip by default?

As I can understand, you want to always show a tooltip for a given data segment
You can use following code snippet:
var pieChart = $("#chartContainer").dxPieChart({
dataSource: data,
series: {}
}).dxPieChart("instance");
pieChart.getSeries().getPointByArg("Second").showTooltip();
See working sample here
And demo here

Google Charts API labels with lines

Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.

You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart: