Hi, I need help in changing a bunch of styling properties for the ChartXY and Axis. I tried the methods from the documentation but its either the function is not found or it is not clear which method in the API doc.
changing the default x and y ticks font properties (family, size, style) - In the API doc I only see the title and for custom ticks.
changing the chart bg color - ChartXY.setChartBackgroundFillStyle returns a function not found error
changing the chart border props - ChartXY.setChartBackgroundStroke returns a function not found error
Please help.
changing the default x and y ticks font properties (family, size, style)
All modification of automatically placed Axis ticks is done via TickStrategy. Since, different tick strategies can have different tick structures, this modification must be at the same time when the tick strategy is specified. It looks like this:
chart.getDefaultAxisX()
// Specify tick strategy and configure it via callback function.
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
.setMinorTickStyle((style) => style
.setLabelFont((font) => font.setStyle('italic'))
)
)
In this case, ticks is of type NumericTickStrategy.
Note for TypeScript users, tick style currently has to be casted to VisibleTicks, like this: ticks.setMinorTickStyle((style: VisibleTicks) => style...)
changing the chart bg color
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
changing the chart border props
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
Related
I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
I have a linear-gradient legend for my map. The x-axis values are calculated based on the minimum
and maximum values from the underlying data. I adapted this legend from this website:
https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html
The legend shows up when user selects a "field condition" from the dropdownlist. However, when
user selects a "state" from a dropdownlist, all the tick marks' text disappear. Same thing when user
selects a "county" from another dropdownlist. I haven't had luck trying to figure this out.
I'm calculating the tick mark values (shows as text) as follows:
var dataRange = getDataRange();
var min = parseFloat(dataRange[0].toFixed(3));
var max = parseFloat(dataRange[1].toFixed(3));
var legendW = 160, legendH = 20;
//create tick marks
var legendX = d3.scaleLinear()
.domain([min, max])
.range([0, legendW]);
var axis = d3.axisBottom(legendX);
d3.select("#svgLegend")
.attr("class", "axis")
.attr("width", legendW)
.attr("height", legendH * 2)
.append("g")
.attr("id", "g-legend")
.attr("transform", "translate(2," + legendH + ")") //margin.left; height/2
.call(axis);
For working example, please see: http://realtimeceap.brc.tamus.edu
I just glanced at the code on the page you referenced the working example at and think I figured out the issue.
Here's the line that taking out the ticks from the legend SVG:
d3.selectAll("text").remove();
which is a part of the onChange function for $("#stateSelect").
Line number: 279 to be more specific (in index.html file)
I think you want to take out all the texts from the mainSVG i.e. with the id: svgMap2.
Changing the above selection will fix the issue. (for eg. if you have a class for the texts to be removed, use d3.selectAll('text.<classname>').
Hope this helps.
I figured out why it's "disappearing". The Web is a stateless medium. So, every time I changed selection from the dropdownlist, the svg refreshes and losses its current state. So I needed to re-create my legend for the state and county dropdownlists. But also, for the county dropdownlist, since there is a Zoom function, it meant that everytime I zoom to another county, I loss my map state again. So I moved the recreate legend function into the zoomedIn method (that is, AFTER the zoom state). It works now.
I want set plotband height inside graph area only for areaspline.
You can't do this with a plot band, but you can do it with a second series.
So, given an example data set of:
data:[1,2,6,9,8,7,5,6,3,6,5,8,7,4,5,8,9,6,3,2,1,2,3,2,1,2,3,6,5,9,8,9,7,7,4,5,8]
You need to know the x and y values of the portion that you want to highlight.
Then you can add a second series that highlights that portion, and format it however you want:
{
lineWidth: 0,
color: 'rgba(255,255,255,0.5)',
data: [[14,5],[15,8],[16,9],[17,6]]
}
You can hide it from the legend by adding:
showInLegend: false
Example:
http://jsfiddle.net/jlbriggs/t6r7ywaw/
Output:
I want to have an interactive legend inside my canvas, however I'm having trouble getting it to work. I am using qwt6.1.2 and this version no longer has the option to insert the legend as an "ExternalLegend", but instead has the class qwtPlotLegendItem to handle legends inside the canvas. However when I read the docs I see:
In opposite to QwtLegend the legend item is not interactive.
An external QwtLegend with a transparent background on top the plot
canvas might be another option with a similar effect.
My question is: how do I show an QwtLegend on top of the plot canvas?
In the documentation for QwtPlot I read:
Legends, that are not inserted into the layout of the plot widget need
to connect to the legendDataChanged() signal. Calling updateLegend()
initiates this signal for an initial update.
I have connected the legendDataChanged signal and triggered it by calling updateLegend(), but now I'm stuck on what to do next. Any tips on how to proceed?
Ok I got it to work:
QwtPlot* plot;
// Attach some plots/histograms to the plot.
MyLegend* legend = new MyLegend(plot);
MyLegend ::MyLegend (QwtPlot * pPlot)
: m_pPlot(pPlot)
{
setParent(m_pPlot);
setGeometry(0, 0, 100, 100);
connect(m_pPlot, &QwtPlot::legendDataChanged,
this, &MyLegend ::LegendDataChanged);
m_pPlot->updateLegend();
}
void MyLegend ::LegendDataChanged(const QVariant &itemInfo, const QList< QwtLegendData > &data)
{
updateLegend(itemInfo, data);
}
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/