As we can see I have one Bar chart with Positive and Negative bars. In the Middle on the 0th scale, there is one line that you can hardly see. I want to increase its opacity. So, I want to increase the opacity of XAxis or increase the opacity of the Zero line
I have found the Document for zero line, but I didn't find any specific solution. Trying by myself I found the way to correctly do it.
and by the following code, we can increase the Zero line's opacity.
valueAxis.renderer.baseGrid.strokeOpacity = 1;
This is the JS version for JSON we can do the following
{
"yAxes": [{
"type": "ValueAxis",
"renderer": {
"baseGrid": {
"strokeopacity": 1
}
}
}]
}
Related
I want to keep value labels outside my amChart graph. The problem is that when value label value is over 9999 then I cant display it's all content.
In this example values should be:
25,000
20,000
15,000
10,000
5,000
First digit is missing. I am dealing with this only by setting panel's margin
"panelsSettings": {
"marginLeft": 40,
"marginRight": 20,
},
Is there any more convienient way to be sure that labels are fitting? hardcoding margin seems to be overkill.
This is my example chart: https://jsfiddle.net/29w35txy/1/
As I mentioned in the comments above, it seems that this issue is depending on the default Browser font.
So it is working in Chrome (left), but does not work in Firefox (right) for me:
Beside that you can prevent this by increasing marginLeft of your panelsSettings which you are already using:
"panelsSettings": {
"marginLeft": 60,
// ...
},
Here I forked you fiddle to show the result.
How can I set the vertical lines related to the Category Axis which are NOT the grid ?
Watch the pictures to see what I m looking for.
It s not the grid, I don't think it's neither a trend line nor a guide. It s related to the data.
Any help will be deeply appreciated.
(I tryed to use the Editor to find it out... no magical result lol)
Amchart picture
amchart my result
This is how I fixed my problem :
somewhere after "type": "serial",
"gridAboveGraphs": true, // to get the vertical lines above the graph
And I added in "categoryAxis": { ... }
"gridAlpha": 1, // to make the vertical lines appear
"gridColor": "#ffffff", // to set the color of the lines
"gridPosition": "middle", // instead of 'start' to see the lines like I wanted
I wanna thank people who tried to help me.
Best regards.
I'm very new to chart building with c3 and d3. I've done a search, but I can't find an answer - could anyone help? how can I force the x axis to display every tick mark - it is currently displaying every other one. I want the chart to be dynamic, so I don't want to have to hard wire in the tick count (it is pulling data from elsewhere).
I hope I've made sense! Grateful for any suggestions.
You need to adjust culling option:
axis: {
x: {
tick: {
culling: false
}
}
}
See docs.
Also, you can force visibility of first and last tick value with little css hack:
.c3-axis-x g.tick:nth-last-child(2) text,
.c3-axis-x g.tick:nth-child(2) text {
display: block !important;
}
Is there a way in d3 to not draw overlapping tick labels? For example, if I have a bar chart, but the bars are only 5 pixels wide and the labels are 10 pixels wide, I end up with a cluttered mess. I'm currently working on an implementation to only draw the labels when they do not overlap. I can't find any existing way to do that, but wasn't sure if anyone else had dealt with this problem.
There is no way of doing this automatically in D3. You can set the number of ticks or the tick values explicitly (see the documentation), but you'll have to figure out the respective numbers/values yourself. Another option would be to rotate the labels such that there is less chance of them overlapping.
Alternatively, like suggested in the other answer, you could try using a force layout to place the labels. To clarify, you would use the force layout on the labels only -- this is completely independent of the type of chart. I have done this in this example, which is slightly more relevant than the one linked in the other answer.
Note that if you go with the force layout solution, you don't have to animate the position of the labels. You could simply compute the force layout until it converges and then plot the labels.
I've had a similar problem with multiple (sub-)axis, where the last tick overlaps my vertical axis in some situations (depending on the screen width), so I've just wrote a little function that compares the position of the end of the text label with the position of the next axis. This code is very specific to my use case, but could adapted easily to your needs:
var $svg = $('#svg');
// get the last tick of each of my sub-axis
$('.tick-axis').find('.tick:last-of-type').each(function() {
// get position of the end of this text field
var endOfTextField = $(this).offset().left + $(this).find('text').width();
// get the next vertical axis
var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]');
// there is no axis on the very right, so just use the svg width
var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width();
// hide the ugly ones!
if (endOfTextField > positionOfAxis) {
$(this).attr('class', 'tick hide');
}
});
The ticks with color: aqua are the hidden ones:
I have the following graph: http://synicworld.com/media/graph.png
Is there a way to get the pointlabel to show on the bars that have maximum value?
pointLabels {
edgeTolerance: 100
}
Looks like it's just edgeTolerance, which I had tried before, but not with a value high enough.
pointLabels {
edgeTolerance: -20
}
This will allow rendering of point labels even if they're too close to the edge. The negative value means there might be overlap onto the chart.