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.
Related
I am using Chartist and svgdom in Node.js to generate a line chart. But the label names are too long and they run over each other.
This is how it looks like:
I saw #375 issue in Chartist and they tried to tilt the labels using CSS, but i think rotating the X-Y axes is a better idea, if possible.
What can i do here?
I'm not sure about flipping it, but as another option, you could make the graph a larger fixed width. Then make it's parent container smaller(screenwidth) and make the entire chart scroll-able horizontally.
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.
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. :)
I have a somewhat limited knowledge of JS and JQuery so I am sorry if this is a stupid question. I have a dashboard of charts which will have varying widths and also allows a user to change the width. The chart automatically adjusts it's size. What I want is for the legend to appear under that chart but fill the width given. My issue is it seems that the number of columns for the legend is set once and unable to be updated. So if I a chart that covers the entire width of the page I want to be able to show a larger number of columns, but if the chart only has a small amount of width space I would like it to use less columns. I can capture the width and figure out the number of columns I would like but is it possible to redraw the legend dynamically? Thanks for the help!
You need a reference to the plot object returned from $.plot, then it's:
plot.getOptions().legend.noColumns = 3;
plot.setupGrid();
plot.draw();
Example here.
I'm using DOJO column charts in my application. Here i have a requirement to display the value on top of the bar. That can be achieved using the label property. After doing this i had another problem i.e. If the value is large then all values are getting overlapped as shown below
In order to overcome this overlapping issue i was trying to display the label in vertical direction. Can you guys help me solving this issue
You can rotate the labels using the "rotation" attribute when you create the axis
For example:
chart.addAxis("x", {labels: xLabels, rotation: 90});