I'm trying to use CSS classes to prevent repeating color codes (per example) on the highchart that I'm working on right now. The idea is that these CSS classes will be used here but considering that not all charts that come afterwards are going to be the same as this one, I don't want to manipulate the style of all of them.
Here's an example of what I'm trying to do.
The javascript, changing the background of it to the colour on the CSS class
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '.bc'
},...
The css:
.bc{
background-color: #2b2b2b;
}
Is what I'm trying to do possible? If not, would there be a workaround?
backgroundColor:color
the background color can get any color like
backgroundColor: '#42431D'
the defaults value is #FFFFFF (white)
the other option is gradient -
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(0, 0, 0)'],
[1, 'rgb(0, 0, 0)']
..........
]
I do not think there are other options in this case
Related
thanks for your time!
I am using a similar example to visualize my data.
I want to improve the visualization of the map and make a gradient. More or less like this. After reading the documentation, I realized that apparently this is not possible:
inRange: {
color: [
new echarts.graphic.RadialGradient(0.5, 0.5, .5, [
{
offset: 0,
color: 'green'
},
{
offset: 0,
color: 'rgb(35, 184, 116, 0.2)'
}]),
'rgba(255, 88, 74, 0.7)'
]
}
I tried to play around with overlaying two equivalent series and different settings for them, but unfortunately it doesn't work.
I solved the problem. By adding a gradient like this.
const mapOptions = {
series: [
...,
{..., itemStyled: {..., areaColor: gradient}},
]
}
And I already created the information panel manually and added functionality through
mapInstance.setOptions(newSeriesOption)
I have bar charts with value on top using chartjs-plugin-labels, and some values bumping to each other as image shown below on highlighted values
How do I add background color to the values or is there any other nice solutions?
you can see my code here, please click Show Files and then choose bar-chart.html
https://replit.com/#panjigemilang/html?v=1
you can user plugin option of chart js as per below code.
plugins: {
datalabels: {
color: "#000",
backgroundColor: "#f0f0f0",
font: {
weight: "bold",
size: 12
},
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
},
}
}
https://www.npmjs.com/package/chartjs-plugin-datalabels => You can use this plugin
https://www.npmjs.com/package/chartjs-plugin-labels => This is very old plugin
I am using Plotly js in my recent angular project. I implemented the library successfully by using its angular based wrapper.
There is one thing that I tried to implement in many ways but failed. I am trying to use my custom color palette for its charts.
I find a work around by passing the colour in the chart data layout like,
data = [{
values: allValues[0],
labels: allLabels,
type: 'pie',
name: 'Starry Night',
marker: {
colors: [['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)', 'rgb(36, 55, 57)', 'rgb(6, 4, 4)']]
},
domain: {
row: 0,
column: 0
},
hoverinfo: 'label+percent+name',
textinfo: 'none'
}
and it worked but it's not the perfect way because I need to add this in every chart data and need to take care of how many data points are there so I push those many color codes.
Is there any way I can provide my color palette in somewhere like config so that every time a chart gets initialize it start taking colors from the custom-defined palette.
The layout property takes a property colorway which takes a list of colour names/codes.
public graph: any = {
data: [],
layout: {
colorway: ["red", "green", "blue", "goldenrod", "magenta"],
autosize: true,
}
}
But I haven't yet figured out how to set this globally.
I am trying to change the default shadow color (when hovering over a bunch of bars for example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-label-rotation)
Focusing on this example on this code part:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, .......
..............................
............................................
the type variable has 3 options as stated in the documentation:
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.tooltip.axisPointer.type
but I couldn't find anything that can control the color of the shadow.
I want it in a much lighter gray color than it is by default.
Is there any other way to set the shadows color?
I have been exploring echarts.js for a while.. and sadly, except of the fact that all charts graphics are amazing, unfortunately - I find more cons than pros :(
Try this:
axisPointer.shadowStyle.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // color at 0% position
}, {
offset: 1, color: 'blue' // color at 100% position
}],
globalCoord: false // false by default
}
It is given in their documentation. Check this out: https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer
I would like to get shadow like effect in line graphs in Highcharts. I searched for this property but couldn't find it anywhere.
This can be done by using the shadow property, like this:
plotOptions: {
series: {
shadow: {
color: 'red',
offsetX: 0,
offsetY: 5,
opacity: 0.2,
width: 5
}
}
},
Working example: http://jsfiddle.net/ewolden/zfscoz4f/2/