I'm trying to draw x-axis gridlines on each y-axis of the chart. Right now the x-axis gridline extends through all of the y-axis with no separation or stops between each y-axis.
Here is how I'm getting now
the code for the x-axis
xAxis: {
gridLineWidth: 5,
minTickInterval: 24 * 3600 * 1000,
lineColor: '#000',
tickColor: '#000',
startOnTick: true,
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
How can I prevent the line from extending to all the chart i.e. on all y-axis. This is what I want it to be like
Please let me know how can I achieve the desired result. I will appreciate any help.
Thanks,
Maxx
It's interesting, because this is how it works in Highstock 1.3.10, see: http://jsfiddle.net/4qGKE/
xAxis: {
gridLineWidth: 1
},
However Highcharts doesn't support this for now ( see: http://jsfiddle.net/4qGKE/1/ ) .
I don't think you can, in actuality.
Several possible ways around it:
using the renderer to draw a box over each area to hide them
set up each gap as another y axis, and use a white plotBand to hide them
None of them are clean, but...
Related
Is it possible to reduce the space between the number and icon? I am using angular 8 and highchart. Below is the chart legend config.
this.legend = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
symbolRadius: 0,
symbolHeight: 8,
reversed: true,
padding: 3,
itemStyle: {
color: '#000000',
fontWeight: 'normal',
fontFamily: 'Roboto'
}
};
You are searching for symbolPadding option
The pixel padding between the legend item symbol and the legend item
text.
Defaults to 5.
legend: {
symbolPadding: 1
}
https://jsfiddle.net/aswinkumar863/s5d0ry2t/
I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example
You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I have datapoints for highchart that looks like this [2016-10-05 03:00:00,1], but I cant make my x-axis format the date correct and show it as a label. It seems like its just counting from 1.jan 1970 and forward.
xAxis: {
type: 'datetime',
title: {
text: 'Dato'
},
format: '{value:%Y-%m-%d %H}',
tickWidth: 1,
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
The strange this is that the tooltip shows the format correct.
EDIT
The millisecond helped a great deal. I only think im missing somekind of Interval
I have this chart http://www.highcharts.com/demo/column-rotated-labels. How could I put the text from the index label outsaid columns.Thank you!
I believe you are asking how to move the labels from within the columns to outside, correct?
Unfortunately, those values from inside the column are not index labels, but dataLabels. So they are representing the values of the columns. I moved them by modifying the x property int the "dataLabels" section of the high chart. You can view how I did it at this jsfiddle:
http://jsfiddle.net/cpnq5fou/
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
x: 12, //12 pixels to move it to the right of the column, instead of inside
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
I want to trim in extra edges from the xAxis .
I am using end on tick and start on tick to achieve that but somehow it seems that highcharts is ignoring that.
Here is the (fiddle)
Options Set
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on',
endOnTick: true,
startOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
title: {
text: null
}
}],
labels: {
enabled: false
},
title: {
text: null
}
}],
I think you mean startOnTick. Anyway, that works exactly as should - note, you are using categories, that means plotting area is divided for categories equally (docs). One tick = one category = one part of plotting area (for example width = 20px).
You have two options:
don't use categorized axis (quite a lot of questions on SO are mentioning this - search for start/endOnTick or min/maxPadding with categories)
set start/endOnTick to false, min to (-0.5), max to (categories.length-0.5) and should work (-0.5 etc. may be different a little).