What am trying to achieve is to have y values of percentage such that it the percentage value of 100 shows high and not starts at 100
example
I have some data
data:[100, 100, 100 .....]
When i draw a high charts with
series: [{
name: 'Percentage Compliance',
data: data //the values of percentage
}]
Am getting a chart of the following
What i wanted it to have is have ranges and have the 100% line be at the top not at the bottom.So have a y axis with 0,10,20
,30% ... buit the line to draw at 100%
What else do i need to add.
just include min and max in your chart like
yAxis: {
max: 100,
min: 0
},
Define your yAxis:
yAxis: {
min: 0,
tickInterval: 10
}
Related
I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples
initLapChart() {
hcharts.chart(this.div.nativeElement, {
chart: {
...
},
yAxis: {
categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
reversed: true,
tickPixelInterval: 50,
gridLineWidth: 1,
...
},
...
}
but it only shows me the first two values, why?
If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:
yAxis: {
min: 0,
max: 4,
reversed: true,
tickInterval: 1,
categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
labels: {
step: 1
}
},
Updated fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/1/
Or you can do it programmatically if you define your categories up front:
var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'],
yMax = categories.length -1;
Fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/2/
The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.
API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step
Example:
http://jsfiddle.net/6qp0v887/
Please look at this highcharts yAxis config:
yAxis: [{
max: 4,
tickAmount: 4,
tickInterval: 1,
endOnTick: false
}],
Fiddle: https://jsfiddle.net/TedLilljegren/8fx9u9v7/
As you can see, the fiddle display a column graph using highcharts.js.
My problem is this:
The min value of the yAxis is 0, makes perfect sense, but the max value is 6!
Why is that?
I have set the max value of the yAxis to 4, which is less than 6, and in addition I have set a tickInterval of 1, with a tickAmount of 4, which ought to result in a maximum y extreme of 4!
The yAxis being in an array has no bearing on this problem as far as I know, neither does endOnTick.
I'd be really grateful if someone could help me make sense of this!
When you set tickAmount the axis max value may be extended; from the docs:
If a tickAmount is set, the axis may be extended beyond the set max in
order to reach the given number of ticks. The same may happen in a
chart with multiple axes, determined by chart.alignTicks, where a
tickAmount is applied internally.
If you remove tickAmount your max value won't be affected.
Highcharts.chart('container', {
yAxis: [{
max: 4,
tickInterval: 1
}],
chart: {
type: "column",
},
series: [{
data: [9, 0, 1]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; max-width: 800; margin: 0 auto"></div>
I want to make a solid gauge using High Chart but I want my yAxis min value to be anything but zero. Whenever, I change the value, the label disappears. Is there a way to make the label appear again? Or maybe someone has an alternative way to make those labels.
In my project, I will have to change the min amount dynamically, depending on user's settings.
Here's a fiddle sample:
jsfiddle.net/TH2aB/1/
You can get the label back by specifying startOnTick:true,
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
startOnTick:true,
title: {
y: -70
},
labels: {
y: 16
}
},
http://jsfiddle.net/yU7EM/
You can also explicitly set the tick positions using the tickPOsitions option:
tickPositions:[10,200],
http://jsfiddle.net/L6vVr/
Is it possible to have static tick marks equally apart even though the difference between the tick marks are not equal? For example here is how I have my yAxis set up in a column chart:
yAxis:
{
min: 0,
title:
{
text: 'Velocity (in/sec)'
},
labels:
{
overflow: 'justify'
},
tickPositions: [0.01, 0.10, 1.00, 10.00]
}
I want 0.01-0.10 to take up 33% of the graph, 0.10-1.0 to take up 33%, and 1.0-10.0 to take up the remaining 34%, with the columns falling into place according to their values.
I have some JPGraphs that have this functionality and am hoping it can be transferred to highcharts.js.
Sounds like you just want a logarithmic axis.
yAxis: {
type: 'logarithmic',
min: 0.01,
max: 10
},
Here's a fiddle example.
AFAIK Highcharts does not support automatic creation of histograms, but you can add a category to the xAxis with the desired labels, and then create arrays of data to match these.
xAxis: {
categories: ['0.01', '0.10', '1.00', '10.00']
},
series: [{
data: [10, 52, 1, 0]
}]
http://api.highcharts.com/highcharts#xAxis.categories
How can i set up my y axis to be in the range of 0 to 24
Here is the code i have.
j$.plot(j$("#placeholder"),[d1],{
xaxis:
{ mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
}
},
{yaxis: { min:0, max:24 } };
};
xaxis seemed to work but when i added y axis it doesnt work.
Apart from this
d1 holds the string which is sent from salesforce
for example d1 holds
[1294041600000,14.00],[1294041600000,14.50],[1294041600000,15.00],[1293955200000,12.00]
I am not able to view the graph, currently i am having the y axis showing only the range -1 to 1, i am assuming this could be the reason why i am not seeing the line.
thanks
Prady
The y axis problem was solved. Here is the code
j$.plot(j$("#placeholder"), [d1], {
xaxis:
{
mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
},
yaxis:
{
min:0, max: 24, tickSize: 5
}
});