I am using Highcharts to create a pyramid chart. The chart itself is created and the data looks fine, but it looks ugly. Specifically, the names of the sections of the pyramid are bolded and the full name is not displayed. How do I fix this?
<script type="text/javascript">risk_pyramid_chart = new Highcharts.Chart({"chart":{"type":"pyramid","marginRight":"100","renderTo":"risk_pyramid_chart"},"title":{"text":null},"credits":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":true,"format":"<b>{point.name}<\/b> ({point.y:,.0f})","color":"(Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'","softConnector":true}},"pyramid":{"colors":["orange","orangered"]}},"legend":{"enabled":false},"series":[{"name":"Risk Pyramid","data":[["Medium",3],["High",23]]}]});</script>
Here's a jsfiddle with the code:
https://jsfiddle.net/9obqdcn0/
I would expect to see the full names of each of the levels of the pyramid as well as the names not bolded like they are. This is how it used to be and I think it changed when we updated our version of HighCharts at some point.
To see full data-labels, you need to adapt the series.width property which is set to 90% by default. The bold effect results from the wrong format of color setting.
plotOptions: {
series: {
width: '60%',
"dataLabels": {
color: 'black',
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/4ea25nj1/
API Reference:
https://api.highcharts.com/highcharts/series.pyramid.width
https://api.highcharts.com/highcharts/series.pyramid.dataLabels.color
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
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 have a script that produces a Highcharts column graph. This working perfectly and display the percentage at the top of each data column.
If I then export it to a PDF using the Highcharts export function the percentage is displayed twice on each column.
Does anyone have any idea why this happends.
As I say the on screen display is fine.
Many thanks in advance for any pointers.
you need to set textShadow as false, see below :
plotOptions: {
series: {
dataLabels: {
style: { textShadow: false },
}
}
}
here is demo with your previous question's data
EDIT: Related topic on github: https://github.com/highslide-software/highcharts.com/issues/3649
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();
});