What I'm after is showing only the colors of the series in the legends and hiding all the text while keeping the title in the series data so it would come in the tool tip.
Through using labelFormatter this (fiddle) is the closest I got to doing it, when I remove the text however it allows the legends to overlap.
Eventually, just showing the colors of the legends and not the legends' text itself is the result I'm after, i.e:
Set,
itemStyle: {
display: 'none',
}
and remove
layout: 'vertical',
DEMO
Related
Using highcharts, if you create a pie chart with styledMode: true; and you import their highcharts.css file, the hover effect on legend items causes all legend items to go opaque.
Code That Causes It
You can even see this on their demo page by selecting the Styled Mode: Pie.
And then hovering over the legends items. If you set the styledMode: false; and then remove the CSS import it goes away.
My question basically: Is this a bug? It seems like unintended behaviour.
I don't think that it is a bug - it's more like a small difference between styledMode and the regular one, which could be easily fixed by changing the opacity for it.
Demo: https://jsfiddle.net/BlackLabel/pq6omt2y/
CSS:
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 1
}
HighCharts: Tooltip is not visible in Bar chart for very small value
e.g.
If we have 2 columns, one has value 5000 and another has 1 then we are not able to see the bar for value 1 and tooltip for corresponding value is also not visible. Is there any provision to show the toolptip for all columns in Bar chart irrespective of column values?
If it works for your case, you can use a shared tooltip. This will display a tooltip whenever your mouse is in the column/bar area but will have all series values in the tooltip.
tooltip: {
shared: true,
},
API: https://api.highcharts.com/highcharts/tooltip.shared
Example: http://jsfiddle.net/5gu8mor7/
you need to set the minPointLength to see the small values
plotOptions: {
column: {
minPointLength: 10
}
}
you can set set it to smaller values, if you want those bars smaller
here is a full fiddle with how it works http://jsfiddle.net/tru0psqL/
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
I want to paint some pie charts with huge legends, but I can't resize the yellow panel in the background of the pieChart.
Is there any way to resize the yellow panel to put the legend below and not resizing the piechart itself?
Piechart without legend:
Piechart with legend:
Here I let you my piechart code (I am using primefaces 4.0):
<p:panel style="width: 600px; height:500px;">
<p:pieChart value="#{pieModel.value}" title="#{pieModel.key}" showDataLabels="true" extender="pieExtender" legendPosition="s" legendCols="6" />
</p:panel>
I have tried to play with panel styles, but it was useless.
EDIT (after kukeltje comment):
I have searched in jqPlot documentation, but I haven't found anything. What are the jqplot properties for changing this panel size. Or maybe I need an extension?. No idea.Please, show me an example... I just found a way to show labels when moused over, and I figured out it could be something similar, but not come upon the background panel size:
<script type="text/javascript">
function pieExtender() {
this.cfg.highlighter = {
show: true,
tooltipLocation: 'n',
useAxesFormatters: false,
formatString: '%s = %d'
};
}
</script>
I have solved the problem defining the style of the chart, and I have to calculate how big will be the legend, bring the width and height to the pieChart component:
This is not the best solution, because it is quite impossible calculate the exactly panel size to keep the pie chart size as without legend, but at least I can keep the pie visible...
I am experimenting with the legend; trying to get as result, a panel where I display data about the chart.
I am planning to add the last value, and min and max.
Looking for some examples, and I found one that use a function called labelFormatter, altho I am not having luck in understanding how does it works.
I need to have values with different text color and different size, so I am not even sure if I can use the title of the legend for this purpose, or if I should hide the legend and create directly a label (altho the issue then is related to moving and resizing, right? Since the legend update its position if the chart window is resized).
Which is the best way to do what I am planning to do? a label or the legend?
If you are considering adding HTML elements into the chart plot area then you will have to use Highcharts Renderer API.
You can refer this JSFIDDLE working demo
it works like:
var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});