I add the chart title like below
chart[unique].setTitle(nn).setPadding({
bottom: -2,
right: -2,
top: -36,
left: -2
}).setMouseInteractions(false);
How do I set the font size ? I tried setFont((font) => font.setSize(12)) , but not working.
Also I am not able to add it to legendBox
legendBox["axis"].add(line[name], undefined, ' ').setText(entryname);
, I want to set font size and color for chart title and legendbox entries or full legendbox. thank you
ChartXY title font
LegendBox title and entries can be styled by methods of the LegendBox Builder (setTitle, setEntry):
const legendBox = ChartXY.addLegendBox(
LegendBoxBuilders.VerticalLegendBox
.setTitle((title) => title
.setFont((font) => font.setFamily('monospace'))
)
.setEntry((entry) => entry
.setFont((font) => font.setSize(10).setStyle('italic'))
),
)
EDIT
ChartXY title color
Related
I want to remove all the unnecessary space around chart even if it very small , So I tried this code
chart[0].setPadding({ bottom: 0,left:-5 ,right:-5,top:0});
chart[1].setPadding({ bottom: -5,left:-5 ,right:-5,top:0});
Still I get some space in top and bottom , please see the screenshot
Assuming that the screenshot is of a single dashboard. Then that line would be a dashboard splitter. You can remove it by setting the splitter style of dashboard to emptyFill with dashboard.setSplitterStyle
dashboard.setSplitterStyle(emptyFill)
That will remove the splitter line and let the charts to use the space it was using.
To get a chart with absolutely no unnecessary space around the chart, you will need to set:
chart title fill style to emptyFill
chart padding to 0
all axis tick styles to emptyTick
all axis stroke styles to emptyLine
all axis nib styles to emptyLine
dashboard splitter style to emptyLine
dashboard background stroke style to emptyLine
See the example below for how that would look like.
const {
lightningChart,
emptyLine,
emptyTick,
emptyFill
} = lcjs
const db = lightningChart().Dashboard({
numberOfColumns: 1,
numberOfRows: 2
})
const c1 = db.createChartXY({
columnIndex: 0,
columnSpan: 1,
rowIndex: 0,
rowSpan: 1
})
const c2 = db.createChartXY({
columnIndex: 0,
columnSpan: 1,
rowIndex: 1,
rowSpan: 1
})
const data = Array.from(Array(10)).map((_, i) => ({ x: i, y: Math.random() }))
const ser1 = c1.addLineSeries()
.add(data)
const ser2 = c2.addLineSeries()
.add(data.map((p) => ({ x: p.x, y: -p.y })))
// Hide titles and remove padding from chart
c1
.setTitleFillStyle(emptyFill)
.setPadding(0)
c2
.setTitleFillStyle(emptyFill)
.setPadding(0)
// Hide axis ticks, line and nibs
c1.getDefaultAxisX()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c1.getDefaultAxisY()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c2.getDefaultAxisX()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
c2.getDefaultAxisY()
.setTickStyle(emptyTick)
.setStrokeStyle(emptyLine)
.setNibStyle(emptyLine)
// Hide dashboard splitter and remove background stroke style.
db
.setSplitterStyle(emptyLine)
.setBackgroundStrokeStyle(emptyLine)
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
I am adding custom tick like below
axisX3.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
.setValue(xVal);
How do I change font size / color
change border color / style
remove the rectangle around the ticks and just show the pointer in top.
I tried
.setTitleFont(f => f
.setSize(24)
)
But not working
You can edit the visual style of the created tick with customTick.setMarker() method. This method takes a mutator function as the first and only argument.
To change the font size:
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setFont(font => font
.setSize(40)
)
)
To style the border:
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setBackground(background => background
.setStrokeStyle((line) => line
.setFillStyle(style => style
.setColor(ColorHEX('#f00'))
)
)
)
)
Showing just the pointer is not possible.
See below for a snippet of styling the tick.
const {
lightningChart,
emptyLine,
ColorHEX,
} = lcjs
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setFont(font => font
.setSize(40)
)
.setBackground(background => background
.setStrokeStyle((line) => line
.setFillStyle(style => style
.setColor(ColorHEX('#f00'))
)
)
)
)
.setValue(4)
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
I need to show the label values inside the Highcharts bar chart. It can be implemented using dataLabels.Formatter function.
But when the bar is in consist-able size the labels are shown inside the bar and it is looking good. In some cases, the bar is very small in size comparing to the label.
Please see the code pen here, https://codepen.io/JGSpark/pen/YzzBydv?editors=1010
The last bar is very small and 40 is showing outside. As the color: 'white' is commonly used for all the labels it is showing in white though it is in outside.
How can I change the color of the label if it is showing out?
In this example, I need to change the color of label 40 to black. Any suggestions?
You need to add custom formatter which will check the size of yAxis value and will change the color of label accordingly:
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<p style="color: ' + color + '">' + this.y + ' M</p>';
},
If your chart is not a dynamically created you can set the dataLabels.color for the particular point.
{
y: 40,
dataLabels: {
color: 'black'
}
}
Demo
API
EDIT
Another solution which I can suggest is to add a functionality inside the chart.events.load which will filter if dataLabels is aligned to left or right and set wanted color - it will work if more labels will be outside the column bar.
events: {
load() {
let chart = this,
series = chart.series;
series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align === 'left') {
p.dataLabel.css({
color: 'black'
})
}
})
}
}
Demo
API
this is my controller
$calendar = Calendar::addEvents($events)
->setOptions([ //set fullcalendar options
'firstDay' => 1,
'height' => '200px',
'themeSystem' => 'bootstrap3',
'columnHeader' => false,
'aspectRatio' => 1
]);
I change the height of container but cell size remains with a scrolling bar
i want to change my calendar like this
Replacing height with contentHeight should help change the size.
You might need more than 200px because it takes into account the whole calendars height rather than just one row. So if it was set to 1000, each section row would have a height of 162 or 329 if it was set to 2000.
So you'll just need to change:
'height' => '200px',
to
'contentHeight' => 1300,
You don't need to include the px.
When creating a Excel 5 file through PHPExcel, I am able to display the background color cell in any color but as soon as I switch to Excel 2007, the background color remains constantly black, is there any fix available to sort it out? Here's the subset of my code where the goal is to display the column header in yellow, any help would be appreciated, thanks in advance:
$styleArrayTableHeader = array(
'fill' => array(
'type' => PHPExcel_Style_Fill::FILL_SOLID,
'rotation' => 90,
'startcolor' => array(
'argb' => '#ffff00', // yellow
),
'endcolor' => array(
'argb' => '#ffff00',
),),);
$objPHPExcel->setActiveSheetIndex(0);
$worksheet = $objPHPExcel->getActiveSheet();
$worksheet->getStyle('B6:K6')->applyFromArray($styleArrayTableHeader);
.....
.....
you need check fill type of cell
if ( $pStyle->getFill()->getFillType() == PHPExcel_Style_Fill::FILL_NONE ) {
$color = 'white'
} else {
$color = '#' . $pStyle->getStartColor()->getRGB()
}
Can you retry with the latest develop branch code from github - there's at least one fix in there for the fill styling in Excel 2007...
Also you're using trying to set argb with rgb values. Either use argb values, or set rgb instead