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.
Related
I am currently working on a specific type of chart and I am trying to achieve the following behavior for example :
As you can see there's a gap between the series last point and the xAxis max value and the reason for this is i wanna have a fix max value and load the daily values of a specific currency as the day passes by. So for example in the morning this chart would be empty and by 18:30 it would be filled.
In my mock example i have the current chart:
and when I try to set a new xAxis max value ( i also tried softMax) to a future day (using epoch converter for unixtimestamp) i am getting this:
and i set the max by doing :
return {
endOnTick: false,
max:1631962355,
tickLength: 2,
gridLineColor: '#b9b9b9',
gridLineWidth: 0,
tickColor: '#808080',
labels: {
style: {
color: '#b9b9b9',
},
x: 0,
y: 12,
format: '{value:%d.%b}',
},
visible: true,
};
}
UPDATE
After implementing your response I get an even weirder behavior. I get the same initial start I had before (no difference) but now if i click and drag it to the right I go from this :
to this:
and If i click and drag it to the left, into this:
The transformation happens without animation, neither by wathching the drag and move motion happen. It just instantly transforms after i drag my cursor pointer for a while towards the sides i mentioned above
You need to use milliseconds instead of seconds:
xAxis: {
max: 1631962355000,
...
}
Live demo: https://jsfiddle.net/BlackLabel/herncjL5/
API Reference: https://api.highcharts.com/highstock/xAxis.max
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 want to create a layout of 2 blocks on a page, each with 3 columns. I am currently using example 10 of the documentation and the setEqualColumns() method.
How can I fix a maximum height?
The result I want to achieve:
you must use SetAutoPageBreak() and resetColumns() functions (more details here). Be careful, if your text is longer than the allowed space, the rest of the text will be written on the next page.
For example :
//Set the distance from the bottom the first block must stop : 130
$pdf->SetAutoPageBreak(true, 130);
//Write the first block : 3 columns, width 50
$pdf->setEqualColumns(3, 50);
$pdf->writeHTML($content_1);
//reset columns
$pdf->resetColumns();
//reset the X position and the page break
$margins = $pdf->getMargins();
$pdf->setX($margins['left']);
$pdf->SetAutoPageBreak(true, $margins['bottom']);
//write the chapter title (like in the TCPDF example 10)
$pdf->SetFillColor(200, 220, 255);
$pdf->Cell(180, 6, 'Chapter 2', 0, 1, '', 1);
//write the second block
$pdf->setEqualColumns(3, 50);
$pdf->writeHTML($content_2);
I want to use chart.renderer.image to put a image on Yaxis. Please see this fiddle
Is there a easy way to put the image on Yaxis? For example I want to put the image on Yaxis [0,100]. It is very difficult to using the following way to do that.
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 0, 10, 30, 30)
.add();
In this line:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
.add();
first two parameters are responsible for position (x,y). So you should modify it to position object in yAxis, like in the example: http://jsfiddle.net/F4qS8/701/
I'm outputting a series of highcharts on a page. In some instances, all data for the specified time period may come back with 0 values.
In such a case, the chart looks like this: http://jsfiddle.net/charliegriefer/KM2Jx/1/
There is only 1 y-Axis label, 0, and it's in the middle of the chart.
I'd like to force that 0 value for the y-Axis to be at the bottom of the chart, which would be consistent with other charts on the page that do have data.
Have tried various yAxis properties, such as "min: 0", "minPadding: 0", "maxPadding: 0", "startOnTick: true".
Seems it should be pretty straightforward, but I'm at a loss :(
Relevant yAxis code:
yAxis: {
min: 0,
minPadding: 0,
startOnTick: true,
title: {
text: ""
}
},
I've found another (and very simple) solution:
You can set y-axis minRange property:
yAxis: {
...
minRange : 0.1
}
This makes Highcharts render yAxis min and max values when all data is 0.
UPDATE:
Highcharts 4.1.9 fix also needs:
plotOptions: {
line: {
softThreshold: false
}
}
updated js fiddle
Only way I could get it to show it "correctly" was by also providing an yAxis max value. I think this is a HighCharts issue when you provide no data elements with a y-value. It draws the best chart it thinks it can.
I had also posted this to the HighCharts forum, where I got a response that seems to work. Unfortunately, it will involve me doing some pre-processing of the data prior to rendering the charts in order to check for all "0" data values... but it'll work. Just wish there was something more "built-in" to HighCharts.
So after summing up the "y" values, if I get 0, the y-axis properties should look like this:
yAxis: {
minPadding: 0,
maxPadding: 0,
min: 0,
max:1,
showLastLabel:false,
tickInterval:1,
title: {
text: ""
}
}
See: http://jsfiddle.net/KM2Jx/2/
The keys seem to be the "max" and "showLastLabel" properties.
Here is a fix I came up with that doesn't require any preprocessing of the data and just let highcharts do it, like it used to before the update. http://jsfiddle.net/QEK3x/
if(chart.yAxis[0].dataMax === 0)
{
chart.yAxis[0].setExtremes(0, 5);
}
You only need to check the first series axis, as if the first one is not 0 then the problem won't occur. I might submit a pull request for this to high-charts, though I kinda feel like they intended for this functionality for some reason.
Since Highcharts 5.0.1, you can also use softMax.
softMax: Number
A soft maximum for the axis. If the series data maximum is greater than this, the axis will stay at this maximum, but if the series data maximum is higher, the axis will flex to show all data.
yAxis: {
min: 0,
softMax: 100,
...
}
Here is an example with a column chart : http://jsfiddle.net/84LLsepj/
Note that currently, in Highcharts 5.0.7, it doesn't seem to be working for all types of charts. As you can see in this other jsfiddle, it doesn't work with line chart.
Just add "min" option
yAxis: {
min: 0
}
For Highcharts 5.x.x, you should be able to just specify:
yAxis: {
softMin: 0,
softMax: 1,
};
This won't work for line chart, which requires that you also set minRange in the same config object as above. Experiment with different values, since defining for example minRange: 6, created a range on yAxis between 0 and 4.
minRange : 1 or whatever you feel so to be displayed in fractions of
softMax : 100 or whatever you feel so
yAxis: {
minRange : 1,
softMax: 100
}