I want to change the color of plot numeric values(1000, 2000...9000) as shown in below snapshot. I couldn't find an option to do so in highcharts api.
Whilst your comments are't that clear I believe you want the xAsis lines color changed:
xAxis: {
lineColor: '#FFFFFF'
}
Add the above to the highcharts object: graph.highcharts({});
See here for more details: http://api.highcharts.com/highcharts#xAxis
Edit
In that case you'll still want the xAsis. Thankfully highCharts let us do things as simply as CSS:
xAxis: {
labels: {
style: {
color: '#fff'
}
}
Related
I need format label in the markline. Is possible add image backround, or in general custom styling?.
Is possible draw the markLine over the candles?, because at the moment when the markline goes down, the candles cover the label.
I would like to do something like what is shown this picture:
EDIT:
This is my actual code
m.setOption(
{
series: {
markLine: {
symbol: 'none',
label:
{
position: 'middle',
show: true,
},
lineStyle: {
color: mc,
//type: 'solid'
},
data: [{yAxis: window.wsData[1], name: 'Tiker'}],
position: 'insideStartTop'
}
}
}
)
This labels has limit to improve deep custom design. By my opinion it's right decision because many developers don't understand design and other people will frustrate due incorrect style, color, position... But we are developers and no one can interfere with our love for real art, hehe )
Try to implement this options: https://stackoverflow.com/a/64875984/1597964
I am using ApexCharts to show some stats. I wanted to hide the x-axis tooltip which is marked in red in the image
options = {
xaxis: {
tooltip: {
enabled: false
}
}
}
https://apexcharts.com/docs/options/xaxis/#tooltip
In another way, you can hide Xaxis using:
xaxis: {
labels: {
show: false
}
}
I don't think the above actually answer the OPs question. Based on their image and question they just wanted to remove the x-axis value at the bottom. You can do that by using CSS as follows:
.apexcharts-xaxistooltip-bottom {
display: none;
}
i am trying to edit the background colour of my chart however it isnt working i can only edit the background colour of the full thing not the chart area, my code is below
var sessions = {
query: {
dimensions: 'ga:date',
metrics: 'ga:sessions'
},
chart: {
type: 'LINE',
options: {
width: '100%',
title: 'Sessions',
titleTextStyle: {
color: '#0f55c4',
fontSize: '16',
bold: true
}
}
}
};
I have tried all the following combinations none have worked;
backgroundColor: 'red', (changed background colour not chart colour)
chartArea: {
backgroundColor:'red'
} (again background colour only)
chartArea: {
backgroundColor: {
fill: 'red'
}
} (again background colour only)
chartArea: {
fill: 'red'
} (doesn't work)
Not to sure what else i can try I've tried everything i can find in the documentation and several sites nothing seams to work it just goes onto the whole background not just the chart area, any help is greatly appreciated.
Thanks.
According to the documentation you're able to change the background color and the backgroundcolor of the chartArea.
I'm able to change both of these colors with the following option:
var options = {
backgroundColor: '#ccc',
chartArea: {
backgroundColor:'#e5e5e5'
}
};
Fiddle.
Sadly I'm not familiar with the way you have arranged your options and such, but my guess would be that you should place this option within
options: {
width: '100%',
.....
chartArea: {
backgroundColor:'#e5e5e5'
}
.......
};
I hope this helps you out!
I need to create a pie chart with labels indicating what each area means, but also another info overimposed over each area. If I use both data labels and a legend, they'll show the same text. How can I have both with different texts, or emulate that effect?
A mock of what I'd like to get:
Using the format or formatter config properties of the dataLabels, you can make them say whatever you want.
pie: {
dataLabels: {
enabled: true,
formatter: function(){
return 'Y Value: ' + this.y; // y value
}
},
showInLegend: true
}
Quick example.
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.