I am trying to make custom html tooltip in amcharts stacked column graph.
series.tooltipHTML = `
<h2>{name}</h2>
`;
However the tooltips on hovering, instead of coming at the position of the column always comes in the middle of the graph for every column. I have tried all the options like toolTipY given in the demos. How to make the tooltip's position correct that is on top or bottom of the respective column slices.
Codepen with problem
Related
I need dynamic columns for legend labels in Pie chart, but if the legend position is right or left, this legend use scroll, how can i use scroll and more than one column.
**Now **
enter image description here
Need
enter image description here
I need this with scroll to.
I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I have a highstock chart to render a stock price and I have an issue when render the tooltip.
The issue is that even I move my mouse across the boundary of the chart, the tooltip still shows up.
For example,
I have a series of stock price from 2015-01-01 to 2015-12-30 rendered on the chart. Then I zoom in from 2015-05-05 to 2015-06-30. Then the x axis of the chart is from 2015-05-05 to 2015-06-30. When I mouse over at the position of 2015-05-05, I can see the value of the stock price for that date and this is as expected. But when I move my mouse a little bit to the right, I can still see the tooltip show the stock price for 2015-05-04.
I can imagine this is an issue related to rounding. But I am not sure how to get rid of this since people may think that the zoom in range is from 2015-05-04 rather than 2015-05-05. To be more specific, how could I make tooltip not show up when the range is out of chart's x axis boundaries?
Any hint or help would be appreciated!
I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.