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>
Related
There is one case where the chart markers are getting removed after panning graph out of the screen. content reamins the same for the markers but lines will get removed.
here is the fiddle for adding chart marker to the graph.
this.graph.addChartMarkerXY()
.setPosition({ x: data.time, y: data.eventYData })
.setDraggingMode(undefined)
.setPointMarkerVisibility(UIVisibilityModes.never)
.setGridStrokeXStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F70002') }) }))
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setOrigin(UIOrigins.CenterBottom)
.setContent([
[`${data.name}`]
])
)
.setMouseInteractions(false)
.setGridStrokeXVisibility(UIVisibilityModes.always)
.setGridStrokeYVisibility(UIVisibilityModes.never)
.setTickMarkerXVisibility(UIVisibilityModes.never)
.setTickMarkerYVisibility(UIVisibilityModes.never)
In my highcharts, I already have a legend at the bottom left of the graph but want to add a custom status indicator for the entire graph. It's going to be a colored oval with a colored dot and a status on it like in the picture.
Should I be trying to use a custom legend or something else? I don't need to hide/show abiliity of the legend so maybe I'm thinking a label is more appropriate but it seems like those only go in the graph. I want something on the top right of the graph. I'm looking through the API to see what else is available but haven't found one that suites my needs.
edit-
seems like I might have to do "chart.renderer.text" but I'm not sure how to convert and make it work in typescript http://jsfiddle.net/phpdeveloperrahul/HW7Rm/
function (chart) {
var point = chart.series[0].data[8],
text = chart.renderer.text(
'Max',
point.plotX + chart.plotLeft + 10,
point.plotY + chart.plotTop - 10
).attr({
zIndex: 5
}).add(),
box = text.getBBox();
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
.add();
});
The best way to add a custom element inside the legend is to use the legend.labelFormatter.
events: {
render() {
let chart = this,
legendAttr = chart.legend.box.getBBox(),
padding = 5;
chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
cursor: 'pointer',
}).css({
fontSize: 20
}).on(
"click",
function() {
alert('plus was clicked')
}
).add()
}
}
API References:
https://api.highcharts.com/highcharts/legend.labelFormatter,
Demo: https://jsfiddle.net/BlackLabel/yu7qm9jx/1/
I decided to just get rid of the title and add custom css to the top of it.
I can create legends like below
Is there any way , I can add custom text dynamically in the place of Bollinger band ? For example I want to show live price every second in legend.
Also how do I programatically enable and disable a legend.
Thank you
You can store the legendbox entry returned by the legendBox.add() method. This entry has a method entry.setText() that can be used to set the text of the legend box entry to be what ever you want.
const legendBox = chart.addLegendBox()
const entry = legendBox.add(series, undefined, 'Legend Box')
entry.setText('Custom text here')
By storing the entry reference you can call the setText method when ever you want to update the text.
See the below example in which the legend box entry text is updated every time new data is added.
// Extract required parts from LightningChartJS.
const {
lightningChart,
DataPatterns,
Themes
} = lcjs
// Import data-generator from 'xydata'-library.
const {
createProgressiveTraceGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY({
// theme: Themes.dark
})
// Create progressive line series.
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
const lb = chart.addLegendBox()
lb.setPosition({
x: 50,
y: 50
})
const entry = lb.add(series, undefined, 'Legend Box')
// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
.setNumberOfPoints(1000)
.generate()
.toStream()
.forEach(data => {
series.add(data)
entry.setText(`Custom text: ${series.getLastPoint().y.toFixed(1)}`)
})
<script src="https://unpkg.com/#arction/xydata#1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/#arction/lcjs#2.2.1/dist/lcjs.iife.js"></script>
You can disable the legend box by calling legendbox.dispose(). This will remove the legendbox completely. To then enable the legendbox again you can call legendbox.restore() which will restore the legendbox as it was.
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value
I have a problem with styling legend items in Highcharts, when applying a Custom Font to the legend items. Actually items are so close to each other and itemMarginBottom and itemMarginTop are not working.
Here is part of my Highcharts code:
legend: {
enabled: true,
y: 20,
align: 'right',
verticalAlign: 'top',
margin: 30,
width: 200,
borderWidth: 0,
itemMarginTop: 15,
itemMarginBottom: 15,
itemStyle: {
color: '#000',
fontFamily: 'MuseoS500'
}
},
And here is the legend's screenshot:
My Ugly Solution:
I solved that like below, but sadly hard-coded:
// it is for the text's in the legend, I'll start from 0 and will
// increase by 10, so it's adding 10 pixels extra space to the next one
var z = 0;
// this is for tiny-lines near the texts in legend, they starts from 14
// and increasing by 14 also ...
var p = 14;
// loop through <text> tags, which are texts in the lgened
$('.highcharts-legend > text').each( function (i) {
// they have 'x' and 'y' attribute, I need to work on 'y' obviously
y = parseInt($(this).attr('y'));
// increasing 'y' value ...
$(this).attr('y', y + z);
// next element is <path>, the colorful lines ...
$(this).next().attr('transform', 'translate(30,' + p + ')');
// increasing the values, for the next item in the loop ...
z = z + 10;
p = p + 10 + 14;
});
I know that it's so stupid, but I couldn't solve that in any other ways, and I had to make them works somehow. I would be happy to hear your thoughts also ... :)
The new legends after the patch:
The Highchart documentation says that there is a property called lineHeight but Its deprecated since Highcharts 2.1
The post of official Highcharts forum also confirms the same. So, Either you can hack source code to change the height according to your need or Try to correct item height with javascript after chart render.
Also, There is an attribute called itemStyle which allows to set CSS for legend item.
e.g. paddingBottom: '10px'
Check the example :
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/