I'm trying to use labelFormat in my Highcharts Pie chart to add the y value of my series to the legend name. I haven't been able to. My question is very similar to this one, except I want the actual y value instead of a percentage. Thank you for your time.
Here's what I have so far, except I don't want percentage. I want the actual value:
legend: {
labelFormat: '{name} ({percentage:.0f})',
},
Try to use this code instead, where 2f is a number of decimals value:
Demo: https://jsfiddle.net/BlackLabel/ukc1tf3p/
legend: {
labelFormat: '{name} {y:.2f}',
},
API: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#format-strings
Related
I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x
We have to create a chart and tried but it is not showing the column in case of negative value in the data.
for link :
'https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-placement'
I have put a negative value and it is not showing a column for it, how we can achieve it for column-placement chart.
You just need to remove min restriction for y-axis.
yAxis: [{
// min: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/xq8ejgnf/
API Reference: https://api.highcharts.com/highcharts/yAxis.min
I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.
with this part of code in the code below
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x',
},
I am getting the following charts:
https://jsfiddle.net/62jq6zsd/
But I am not getting the right result.
Putting your code into a fiddle, I can see that nothing is plotted:
http://jsfiddle.net/jlbriggs/3d3fuhbb/225/
Looking at your data, the reason is apparent. You have your data set up as;
{
x: 1483358580000,
y: 1
}
But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.
In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.
It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.
And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.
If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.
Example from the Highcharts demo:
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)
Demo Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/
{{ EDIT }}
Using your chart as a base, here is an updated version.
Code (data based on yours, edited for demonstration)
xAxis: {
categories: ['', 'Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[1,1483338000000,1483338010000],
[1,1483338030000,1483338070000]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/
{{ Edit again for comments }}
To reduce space between the series, you have a variety of options
1) reduce the height of your chart
2) increase the width of your bar
1/2) do both!
3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.
Option one, in a fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/1/
Option three:
http://jsfiddle.net/jlbriggs/qdza1032/2/
I want to format the yAxis label and add trailing zeros after decimal. The number of precision will be decided dynamically as per the value of yAxis labels.
For Example: If there are 3 labels in yAxis with value 95.8, 95.825, and 95.85. then, it should be displayed as 95.800, 95.825, 95.850.
Edit:
Actually, the requirement is to have the decimal precision dynamically. Actually sometimes, our chart shows labels as 93,94,95, in this case we don't want to add precision. The idea is to add same precision, if the chart is generating, yAxis labels like 94.25, 94.5, 94.75, then, I want the chart to show yAxis labels as 94.24, 94.50, 94.75.
For dataLabels there are some format parameters you can add to your y values.
You can add this to the plotOptions structure like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.3f}' // <<< .3f is 3 decimal places out.
}
}
},
Here is a modified fiddle:
http://jsfiddle.net/ja799vep/
More details from highcharts.com:
http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
EDIT:
Sorry the example above was just for datalabels...Here is an improved example that shows, xAxis, yAxis, dataLables and toolTip with different '3 decimal place' approaches.
http://jsfiddle.net/franktudor/okce7p7n/
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/