As per the documentation, Changing font color of a particular cell is possible in this way:
sheet.addRow([
'alex',
{
text: 'image',
hyperlink: 'http://something.com' //trying to change color of this cell
}
])
sheet.getRow(1).getCell(2).font = {color: {argb: "004e47cc"}};
But, How do i specify styles while adding a row itself. (something like below).
sheet.addRow([
'alex',
{
text: 'image',
hyperlink: 'http://something.com',
font: {color: {argb: '004e47cc'}}
}
])
My ultimate goal is to change color and underline all Hyperlinks in the sheet (**Hyperlinks are in random cells). Is there a better solution?
This works:
sheet.eachRow(function(row, rowNumber){
row.eachCell( function(cell, colNumber){
if(cell.value && cell.value.hyperlink)
row.getCell(colNumber).font = {color: {argb: "004e47cc"}};
});
});
It is indeed possible to change the background color when adding a row;
let row = workSheet.addRow(rowValues);
row.fill = {
type: 'pattern',
pattern:'solid',
fgColor:{argb:'#000000'},
bgColor:{argb:'#FF0000'}
};
Related
I need to change the border color of a specific data series based on his category in a bar chart ... is it possible with some formatter function?
If yes, are there some examples?? Thank you for your help!
For setting colors for series you can define an array of colors.
I'm not sure what you mean with specific data series but it's an option to set color and border for each point individually.
data: [{
y: 814,
borderColor: '#FFFF00',
borderWidth: 10
}]
Example: https://jsfiddle.net/BlackLabel/u6czsqmr/
Thank you for your reply.
I have found a solution that works well.
const scelte = array('uno','due','tre');
labels: {
formatter: function(){
var color = (this.value);
var sper = scelte.includes(color) ? 'red' : 'blu';
return '<span style=\"color: '+sper+';font-weight:bold;font-size:16px;font-family:calibri\">'+this.value+'</span>';
}
}
},
If var color is in array scelte then the label color will be red, in all the other cases the label color will be blu.
I'm trying to solve the same problem for pie chart ... but at the moment I don't find it. Any suggestion?
Thank you
I want to only show the first and last label for the xAxis. Then, I want to show it without rotation and in a single line. And when I do this, this happens and the last label gets cut when there are many columns or the width of the viewport is small.
Demo online:
https://jsfiddle.net/8esnf4dj/
This is my xAxis config:
xAxis: {
categories: [....],
labels: {
rotation: 0,
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
Is there any way to align the text in a way that this won't happen?
I've seen that this can be fixed by adding chart.marginRight but I would rather prefer not to "lose" that space not the right and just align the text in a way that will always be visible.
I am not sure if it is possible to achieve it by using only API options, because all the labels are rendered in the center of the tick, but you can move/set the position of each label 'manually'.
events: {
render() {
const chart = this;
const xAxis = chart.xAxis[0];
const lastTickPosition = xAxis.tickPositions.length - 1;
const lastLabel = chart.xAxis[0].ticks[lastTickPosition].label;
lastLabel.translate(-lastLabel.getBBox().width/ 4, 0)
}
}
Demo: https://jsfiddle.net/BlackLabel/kbn7zwfc/
API: https://api.highcharts.com/highcharts/chart.events.render
You can use "align: right"
Read the usage of align to understand why this works. Basically this would mean that the bar would align to the rightmost end of the label so the label always fits
xAxis: {
categories: [....],
labels: {
rotation: 0,
align: "right",
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
I have the following chart:
var chart = Highcharts.chart('chartcontainer', {
chart: {
polar: true,
type: 'column'
},
[other code]
}, function (chart) {
chart.renderer.text(textLine, 40, 80).css({'red'}).add();
});
The renderer.text() function gives me customText which can be easily modified. However, this graph is used in a somewhat more complex situation where the context will determine the color of the text (so it is not fixed to 'red'). I need to give it the color of the title. The title colors are set through the options somewhere else.
It all works fine but I do not seem to be able to get that color value AND assign it properly to the text color value, something like this:
chart.customText.style.color = chart.title.style.color;
How must this be done?
You can get the color by: chart.title.styles.color. Example:
var chart = Highcharts.chart('container', {
...
}, function(chart) {
chart.renderer.text('Some text', 40, 80).css({
color: chart.title.styles.color
}).add();
});
Live demo: http://jsfiddle.net/BlackLabel/10u2nLay/
Is there any way to set each word its own color in one cell with jspdf-autotable?
doc.autoTable({
body: rows,
allSectionHooks: true,
willDrawCell: function(data) {
if (data.row.section === 'body') {
// data.cell.raw – always 2 words
// data.cell.text = "green word" + "red word"
...
}
},
});
Yes! Instead of relying on the plugin to draw the text you can draw it yourself using doc.text().
I'm a R programmer trying to parse some JS code though highcharter package.
I'm trying to change each bar color on hover with this example based on this question.
I've tried this:
plotOptions: {
column: {
events: {
mouseOver: function () {
this.chart.series[this.index].update({
color: 'blue'
});
},
mouseOut: function () {
this.chart.series[this.index].update({
color: '#b0b0b0'
});
}
};
states: {
hover: {
color: colors[x]
}
}
}
}
However I can only highlight with the 'blue' color. How can I use a different color for a different column?
Thank you.
You see only the blue color on all columns, because you set those events on series.
In order to achieve it, you can create arrays with colors and assign it to general chart object on chart.events.load. Then in series.point.events.mouseOver and mouseOut should be able to change the color by point index. Here is the example code:
highchart() %>%
hc_chart(events = list(
load = JS("function() {this.customColors = ['red', 'green', 'blue']}")
)) %>%
hc_series(
list(
data = abs(rnorm(3)) + 1,
type = "column",
color = '#ddd',
point = list(
events = list(
mouseOver = JS("function() {this.update({color: this.series.chart.customColors[this.index]})}"),
mouseOut = JS("function() {this.update({color: '#ddd'})}")
)
)
)
)
API Reference:
https://api.highcharts.com/highcharts/series.column.point.events
https://api.highcharts.com/highcharts/chart.events.load