I am trying to show a border on my Shield UI Chart. I set it's color:
borderColor: 'red',
but it won't show. I tried to set the color as hex value:
borderColor: '#F01616',
but this doesn't help either. However when I set the same value for the charts background:
backgroundColor: 'red',
it works. What am I dong wrong?
You probably didn't set the border-width. How does your HTML markup look like?
See here in the Shield UI Documentation.
You are setting the color correct. You are right that it can be set either as
borderColor: 'red',
or as
borderColor: '#F01616',
As I can see from the previous answer and agree to it, the only thing you are missing, is to set the line thickness of your borther. However you need to use borderWidth:
borderWidth: 5,
using the internal property and not the CSS attribute border-width, at least because there is no CSS embedding.
Related
I am referring to the apexcharts documentation to find if there is anyway to show the border of each cell in the heatmap.
So far, I have tried to add
grid: {
show: true,
borderColor: '#90A4AE',
}
which did not work.
fyi, this is the current state of the heatmap.
Any suggestion will be helpful, thank you!
You can change stroke color (white space between cells) like this
stroke: {
colors: ["#90A4AE"],
},
https://apexcharts.com/docs/options/stroke/
Im using Sparkline with AngularJS, it shows the graphics correctly, the problem is that the frame that shows the data is unbalanced! and I dont know why, this is the problem:
As you can see the number 7 is out of the frame, I dont know the why of this, and I cant find the style of this frame, anyone knows how to? :D
Finally I fount the solution for this problem, I created the sparkline like this:
$('.graphicLine').sparkline(vm.charData,{
type: 'line',
height: 80,
width: '100%',
lineWidth: 2,
lineColor: '#dddddd',
spotColor: '#bbbbbb',
fillColor: '',
spotRadius: 3,
highlightLineColor: '#fff',
tooltipFormat: '<p>Clientes : {{y}} </p>'
});
So in the frame the sparkline shows the tooltipFormat, just put in all what you waht to show on the frame
I have a heatmap that has some space at the bottom that I want to get rid of. I have tried multiple SO threads suggesting that I change chart.marginBottom, chart.spacingBottom, x and yAxis margins, disabled legend, etc. Unfortunately, I created a jsfiddle and am unable to replicate the issue. The jsfiddle code is nearly identical my code: http://jsfiddle.net/b637gdxv/1/
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200, // - width when in one row
height: 250,
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
},
Here is an image of what it looks like on my page:
Notice the extra space on the bottom. Sorry that I am not able to define the problem more specifically - the difference between my page and the jsfiddle eludes me, and I am not super experienced with javascript. Any ideas of things to try?
Did a little more digging into the highcharts JS source code, and found a work around! This is actually being impacted by the logic that calculates the axis ticks, so setting the "endOnTick" option to 'false' on the impacted axis appears to resolve the issue. E.g.
yAxis: {
labels: {
enabled: false
},
endOnTick: false, // This is the fix
title: null,
reversed: true
}
Here is an updated jsfiddle showing the fix:
http://jsfiddle.net/e0av9wm1/
Compare to the following, which doesn't include the fix:
http://jsfiddle.net/v1697qhj/
Since we don't have enough code to really identify what you're issue is and you can't even reproduce it on jsfiddle, I'll give you a walkthrough of the steps I take to identify CSS issues and fix them - particularly when the CSS is applied dynamically.
If you're using IE, use the developer tools (F12). From the HTML tab click the "Select Element" tool (it looks like a pointer). Move the mouse to the outer box and it will garnish a slight grey border... click the mouse.
At this point - I think you'll have in the HTML pane the following tag highlighted:
<rect class=" highcharts-background" fill="#ffffff" stroke="grey" stroke-width="3" x="1.5" y="1.5" width="196" height="246" rx="5" ry="5" strokeWidth="3"/>
Note the attributes are clickable and can be changed on the fly.
At this point you can start tinkering with the styles (on the right pane) or even switch to the CSS pane (next to the HTML tab) and tinker around with the various CSS definitions.
There are different developer tools for each browser. Chrome has them built in as well and Firefox has the FireBug plugin to provide them. For this type of thing they come close to working the same way.
Let us know what you find and good luck!
I'm running into a similar question with my heatmaps, and updated the jsfiddle to show the issue:
http://jsfiddle.net/v1697qhj/
You'll notice in that example that the cells of the heatmap do not fill the full height set on "chart.height". I'm wondering if the issue is because the number of rows divided into the available height is not an even number of pixels, so when highcharts draws the rows at a fixed pixel height there is some amount of total space left over that is never used.
Does anyone know if there's a way to get Highcharts to add a pixel to every so many rows (or columns for the horizontal case) so that the cells of the heatmap will always fill the available plot area?
chart: {
type: 'heatmap',
marginTop: 26,
marginLeft: 5,
marginRight: 5,
marginBottom: 5,
width: 200,
height: 250, // We want the cells to fill this entire height
borderWidth: 3,
borderColor: 'grey',
borderRadius: 5,
plotBackgroundColor: '#FFFFFF',
plotShadow: true
}
Thanks in advance for your time and help.
I'm using highcharts and need to set the background color of only the x and y axis. See attached:
So what I need is to set a background color on the x-axis that is different from the dark gray of the graph (right now they are obviously the same)
Does anyone know if this is possible and, if so, how to go about it? I've been through the highcharts API Highstock API extensively, but couldn't find anything specifically for this.
Thank you again for your time and help!
Rich
Did you try:
rendered a rectangle and positioned it to the bottom of the graph.
chart.renderer.rect(0/*position on X-axis*/, 275/*position on Y-axis*/, 680/*width*/ , 25/*height*/, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
Read more: highchart renderer
x-asis does not have backgroundColor Set background color to HighChart xAxis labels
Hope this help.
I have the below chart which is fine, however I have to add values to have the top line in place. It is a constant value and will never changes, How can I make this purple line permanent and also adjustable by the user?
Solution:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5,
dashStyle: 'shortdash',
id: 'plotline-1'
}],
What you are probably looking for is a plotLine. You can have it set to some default value on load and then remove/add when the user changes the value that they want to display. Lots of ways to do this.
You can set two xAxis and linked purple series to one, but rest of series (area) to other.
Examples of multiple axis http://www.highcharts.com/demo/combo-multi-axes