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.
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/
I'm making a timeline Highcharts graph, and I have an issue where some of the markers, from partiular series, are shown behind the gridLine.
I read that since they are drawn as svg paths, it is the paths drawn last that is shown on top. But I'm not sure I can control when the gridline is drawn.
I found a jsfiddle that seems to have the same issue as me:
https://jsfiddle.net/oa3j8429/
I could set the lineWidth to 0, but I would prefer not to, as I need to show different colors on the line:
plotOptions: {
timeline: {
linewidth: 0
Any ideas on how to get all the markers on top of the gridline?
Thanks.
I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
This is my first time using Chart.js and I want to create bar chart with multiple series. Based on documentation we have to specify fillColor for each dataset.
Is that possible to create multiple chart without set fillColor (like barchart in excel).
fillColor uses rgba. a = alpha. you can set alpha value to 0. such as
fillColor: "rgba(220,220,220,0)"
this should give it a transparent fill color and still display the border colors assuming you have them not transparent.
I know its very late, but we can achieve empty bar chart with only the border visible by setting the property : fill:false
Hope it helps someone :)