Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.
If you take a look at the following fiddle:
JSFiddle
Relevant part is:
yAxis: {
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
}
This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.
Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?
Screenshot, left part is wrong, right part is correct:
I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
title: {
align: 'high',
text: 'Rainfall (mm)',
style: {
'text-anchor': 'start'
},
rotation: 0,
y: -10,
x: -25
},
I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it.
http://api.highcharts.com/highcharts#chart.marginLeft
You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace
Here you can find live example how your chart can work with this options:
http://jsfiddle.net/Ljwp7694/
Kind regards,
i can't able to add image at my 3d chart:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
where i must add this code (for renderer image) ?
function (chart) { // on complete
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
.add();
});
thanks!
I need to add an image in highchart and then need to rotate it on different angles.
Here is the example: http://jsfiddle.net/peZfm/
And the rotation code:
chart.renderer
.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30)
.css({
'-webkit-transform': 'rotate( 50deg)',
"-webkit-transform-origin": "center center",
'transform': 'rotate(50deg)',
"transform-origin": "center center",
'-ms-transform': 'rotate(50deg)',
"-ms-transform-origin": "center center",
})
.add();
The problem is, image rotation is working on Chrome, Mozilla but not working on IE10.
Is there a way to fix it?
You can use attr() and rotation paramter: http://jsfiddle.net/peZfm/3/
chart.renderer.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30) .attr({
rotation:40
})
.add();
Is it possible to have a diagonal plotline in highcharts?
I have a line chart which tracks weightloss (y axis = weight, x axis = time), and I need a plotline which starts at the initial weight, and plots diagonally to the time when the user should have lost the weight by.
I can plot a simply flat plotline like this:
plotLines: [{
value: 0.696,
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: 'Latest value',
align: 'right',
y: 5,
x: 0
}
}]
but, that's just a simple flat line.
Any ideas?
Easiest way is to simply use a separate line series.
Plot just your first and last point. You can disable markers, turn off mousetracking, and hide from the legend if you want it to behave just like a plotLine.
http://api.highcharts.com/highcharts#plotOptions.series.enableMouseTracking
http://api.highcharts.com/highcharts#plotOptions.series.marker.enabled
http://api.highcharts.com/highcharts#plotOptions.series.showInLegend
Plotlines can be horizontal or vertical, but you can use renderer to add custom line (like diagonal) in the chart: http://api.highcharts.com/highcharts#Renderer.path()
i'm hoping that this quick description and image will ring a bell with someone who has had a similar issue and therefore a suggestion/fix.
i have a column graph that i am adding data to dynamically (via jQuery parsing an XML file).
for some reason, after the data is added, the alignment of the different series gets a little off. the issue fixes itself after i toggle one of the series by being visible/invisible (by clicking the series in the legend).
when i add the data via hardcoding the numbers, just to ensure it works, it works great.
here is the image:
the yellow series is the last series added to the chart, the red and purple series line up ok after toggling the visibility of one of the 5 series.
any help would be greatly appreciated!
UPDATE with info on the data:
i have 5 series of data and 10 x-axis categories
i am building a multidimensional array of data as i parse the XML file
the array length is 5, with each of those 5 index's containing an array of length 10
this is what the array looks like after it has been populated with data:
index#: 0 value: 0,0,0,0,0,0,0,0,0,0
index#: 1 value: 180,210,0,0,0,0,0,0,180,210
index#: 2 value: 22,4,0,0,0,0,0,0,22,4
index#: 3 value: 0,0,0,0,0,0,0,0,0,0
index#: 4 value: 200,30,0,0,0,0,0,0,4,0
i am adding the data to the chart with the following JS code:
for (var c_ary_bs = 0; c_ary_bs < ary_bs_schedule_orig.length; c_ary_bs++) {
chart.series[c_ary_bs].setData(ary_bs_schedule_orig[c_ary_bs]);
}
hopefully that will help, thank you!
UPDATE 2, some more info
i've hard coded the data being added to the array, to help pinpoint the issue:
chart.series[0].setData([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
chart.series[1].setData([180, 210, 0, 0, 0, 0, 0, 0, 180, 210]);
chart.series[2].setData([22, 4, 0, 0, 0, 0, 0, 0, 22, 4]);
chart.series[3].setData([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
chart.series[4].setData([200, 30, 0, 0, 0, 0, 0, 0, 4, 0]);
alert('done')
when the alert fires, the graph columns are aligned properly, after I click "ok" to dismiss the alert, the alignment issue happens, as the previous image depicts.
I found an imperfect fix:
-setting the marginLeft of the chart to 70 alleviates the issue with the columns not aligning
-for some reason the y-axis title text is displaying over the y-axis ticks, so i am using the following to make it visible:
yAxis: {
title: {
x:-20,
text: 'Schedule Days'
}
}
(note the x: -20)
Whats's odd is that when I toggle one of the series (by clicking it in the legend) the yAxis title text reverts to where it should be (which is now 20px off because of the above fix).
The perfect fix would put the yAxis text where it is after I toggle one of the series, but at least this way it is now visible regardless of whether or not the user toggles the series.