I am building a chart with Chart.js (using Angular 2 directive ng2-charts).
I have an external table where each row data reflects the X-axis label of the chart.
I was wondering if it is possible to hover one row of the table and highlight that label on the line chart (e.g. make the tooltip appears)?
The table and the chart are two completely separate HTML elements of course.
Related
I'm using D3.js with ReactJS my goal is to hover over one chart and display a tooltip on all the other charts with their own data.
The problem is the tooltip displays the data of the same hovered chart in all other charts.
The problem is in this file: ChartComponents/Tooltip.js.
This is the actual result multiline-chart-tooltip-acoss-all-charts
How to create a pie chart widget where the user can change the distribution of the pie chart by dragging the borders of the wedges?
Is there a package with such a widget in react?
Personally i have never seen a pie with draggable border to change the distribution. I have worked with ApexCharts (https://apexcharts.com/react-chart-demos/pie-charts/update-donut/). Each part of the pie is basicaly a number so, you can create for example a slider for each part and dynamicly update the part of the chart.
I have two pie charts with different data but same labels and background colors. How can I create a standalone legend (a legend without a chart) using ChartJS so that the legend corresponds to both the pie charts at the same time?
I tried creating a pie chart with the data array set to an array of 0s. However, that causes an empty pie chart to be generated, which takes up a lot of space; so that's a no go.
Any help would be deeply appreciated.
I have a Highcharts pie chart with a table and two buttons added to it. I need the data labels from the chart to appear dynamically around them, instead of hidden beneath as they are currently.
Is there a way to avoid conflicts with the table overlapping the data labels in Highcharts?
Is there a way to do this within the CSS or is custom JavaScript required?
fiddle
I noticed you set your table to z-index: 1.
Your Highchart is an SVG so it has no concept of z-index. The type of ordering in SVG is the painters model, meaning each subsequent element is painted over top of the other.
If you really want a table occupying the same space as the chart, I think unfortunately you would have to have the table as elements in the SVG and put it before the highcharts-data-labels so that these labels float over the table because they will be "painted after/on top" of the table.
I'm trying to develop a Gantt chart to display a certain list of grouped activities. In the image below I have attached the sample set of data that is used to generate my Gantt chart.
I have used the Gantt chart provided in this link (http://yukon-admin.tzdthemes.com/html/plugins-gantt_chart.html) and modified it so that I can display multiple activities per group. [In here they only let you add one activity per group].
This is the Gantt chart from the template,
Modified Gantt chart based on my requirement,
Now I want to display my activities one after the other, something similar to what would happen when you apply float:left,(float:left is not working in this situation).
This is how I want to display my activities, I can achieve this by setting the CSS property to absolute but the lines stay static and I can't scroll my gantt chart to see the other activities.
I see that even though a width is defined to that particular div, it is taking up the whole width of its container div.That's why the divs are stacked one below the other.
What can I do to get the lines displayed one beside the other and not one below the other? Any help would be appreciated.
Thanks in advance. :)