Example: http://jsfiddle.net/xptzq27r/1/
Problem: tickAmount is set to 3 and displays only 2 (Enter any value, actually displayed is that -1) Why?
chart: {
tickAmount: 3,
}
Doc: https://api.highcharts.com/highstock/yAxis.tickAmount
You need to enable showLastLabel option:
"yAxis": [{
"opposite": false
}, {
showLastLabel: true,
tickAmount: 3,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/o7wgtsxa/
API Reference: https://api.highcharts.com/highcharts/yAxis.showLastLabel
Related
I am implementing a chart with highcharts based on vue.js.
LineWidthPlus function works well on hover, but lineWidthPlus does not work on select.
This is part of my code.
plotOptions = {
series: {
lineWidth: 2,
boostThreshold: 1,
allowPointSelect: true,
stickyTracking: false,
states: {
hover: {
enabled: false,
},
select: {
enabled: true,
lineWidthPlus: 10,
},
},
}
What is the cause and if there is a demo, please tell me the demo url. thank you.
For some reasons, I need to use Highstock (navigator, crosshair, annotations...).
And I need to display a graph with numerical values for X axis.
In this simple example, the X Axis looks chaotic, and numeric values are not placed/spaced as expected.
Highcharts.stockChart('container', {
rangeSelector: {
enabled: false
},
navigator:{
enabled: true
},
xAxis: {
labels: { formatter: function () {return this.value;}},
crosshair: {
width: 1,
color: 'black'
}
},
series: [{
type: 'areaspline',
data: [
[10, 30],
[20, 25],
[25, 22.5],
[30,20],
[40,15]
]
}]
});
JSFiddle example:
Here
1/ What should I do to get a graphic like this?
Normal X axis with numerics
2/ I can see the line is smoothed. How can I disable this smoothing?
Disable the ordinal option:
xAxis: {
ordinal: false,
...
}
Live demo: https://jsfiddle.net/BlackLabel/q6xv7koh/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
Using this fiddle as an example.
I cannot find a way to default to a certain level and selection: in the linked example, if I wanted to start drilled-down into South-East Asia, how could I do so? (as if I had clicked South-East Asia once it loaded)
Highcharts.chart('container', {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}]
});
As I understood - you would like to trigger a drilldown event on the initial load, am I right? If yes, here is a demo with the example how to achieve it.
if (Highcharts.isString(drillId)) {
series.setRootNode(drillId, true, {
trigger: 'click'
});
}
I have this issue, where I want a shared and custom-formatted tooltip on a Highcharts chart, but at the same time I want the crosshairs to work.
There is no issue on the x axis, but the on the y, it does not follow the pointer.
Any suggestions?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
}
],
tooltip: {
shared: true
}
});
1st JSFiddle example
UPDATE:
Based on the comments given under this post, I've updated the issue.
Now, I have some compromise: I have two crosshairs on the y axis (or, exactly as many as many series item I have...)
The issue is, that if I link the axis options to the 0th option, the scale will be wrong. If I don't (and I don't have an example for that, but you can delete the line and run again), the two series will be at different scales, but since the second option is hidden, the whole think is just a mess.
And if I don't link the options to the 0th item, the crosshairs will not work again...
Any idea for this?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: [
{
crosshair: true
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
series: [
{
yAxis: 0,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
yAxis: 1,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
}
],
tooltip: {
shared: true
}
});
2nd JSFiddle example
If I am thinking correctly,your worry is about the negative value.So for the negative value you can assign min value to yAxis in charts
check Fiddle demo
yAxis: [
{
crosshair: true,
min:-10,
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
When using a reversed line chart with min and max values, the line is partially hidden at the min value. The problem is that the drawing canvas ends exactly at the min value line. When you have a line that is thick only part of it is visible there, the part that is lying above the min value line is hidden. You can see an example here. I tried different options to fix this but havent been successful. Is there a way you can increase the chart canvas on top?
This is the highcharts code:
$("#chart").highcharts({
chart: {
type: "line",
spacingBottom: 30,
height: 400,
alignTicks: false,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: "Chart"
},
yAxis: [{
title: null,
reversed: true,
showFirstLabel: true,
allowDecimals: false,
startOnTick: false,
endOnTick: false,
tickInterval: 5,
minorTickInterval: 1,
max: 10,
min: 1,
}],
series: [{
yAxis: 0,
data: [6,2,2,1,1,1,1,1,1,1,1,1,1,2,2,1,1,2,2,2,2,2],
lineWidth: 10,
marker: {
enabled: false
}
}]
});
The min: 0.9 works well unless you have tickPositions set as well without startOnTick set. If you are setting tickPositions, then look at adding startOnTick: false to the yAxis as well.
I'm not sure why this is a problem - you have set strict min value for yAxis, so chart is forced to cut off that line, remove that option, and this will work perfectly fine: http://jsfiddle.net/DruGa/5/