there are multiple places that use tooltip in the project, how to unify the style
in addition to configuration in each tooltip, is there any other way?enter image description here
enter image description here
Related
In Vaadin 14, I'm trying to determine how to change the graph's line style from solid to dashed? (I need to do this programatically.) At first, it seemed trivial (based on https://vaadin.com/blog/styling-your-vaadin-charts), but I do not see API for either color setting (eg
PlotOptionsLine redBirdOptions = new PlotOptionsLine();
redBirdOptions.setColor(new SolidColor("#d62031"));
) or dash-style setting available in Vaadin 14. Anyone have examples on how one can programmatically set the dash style (and color) of series in a Vaadin 14 line graph?
Disclaimer: There is no way to do it Java only. You would need to style chart using CSS. Though, the color can be changed via styles settings in Java like shown here Treemap custom colors, I will follow the CSS approach below
The documentation you are referring to is for Vaadin 8, which uses another version of the highcharts library. In Vaadin 14, you need to configure settings via css. There is no example especially for your use case, but you can find in the links below all the needed info :
CSS file configuration and correct import annotation CSS Styling
Class names that can be used to style charts Highcharts API
The color is set using .highcharts-color-{n} class (or the --vaadin-charts-color-{n} property, which is preferred here), where n can be defined for options on Java side like this : plotOptions.setColorIndex(2);. A highchart example for colors can be found here : CSS Colors
For dashed css you could check this : CSS dashstyle.
Overall, this should do the trick:
Create a chartStyles.css file
Put the content below there :
:host {
--vaadin-charts-color-2: red;
}
.highcharts-series-0 {
stroke-dasharray: 1, 3;
}
Import the style using :
#CssImport(value = "./styles/chartStyles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
Plot options have colorIndex of 2 (as this is the value in css we are referring to):
PlotOptionsAreasplinerange range=new PlotOptionsAreasplinerange();
range.setColorIndex(2);
dataSeries.setPlotOptions(range);
After that the chart color should change. You can skip the index assignment and use --vaadin-charts-color-0, if you have only one chart on the page. If not, I would suggest to add theme names to the chart and adjust css file to use them. This way you would ensure that only the chart you want is affected.
I want to apply visual theme Dark Unica https://www.highcharts.com/maps/demo/mappoint-latlon/dark-unica in the jsfiddle mentioned in the link , i also tried to change the background color, how should i do it and is this lat/log map ?
To use a HighCharts theme, just load it's .js file. For dark-unica:
<script src="https://code.highcharts.com/js/themes/dark-unica.js"></script>
http://jsfiddle.net/ne1w0h4m/
And, yes. That is a HighCharts lat/lon map chart.
I'm looking for a way to indicate key dates on a highchart with a label eg Public Holiday. I can't find a way to add labeled guidelines or add an opened callout to a point? Help appreciated.
In Highstock you have series type called flags which is a opened callout (similar to Dygraphs annotation). This is probably the closest fit to the indicators you referred. See this JSFiddle example of how it looks. Note how this example uses the Highstock source file, but builds a Highcharts chart. See this documentation for official information.
In Highcharts you can highlight points, labels and value in a wide variety of ways. First of you can add data labels to your points, which renders text next to it. Secondly you can use plot lines to highlight certain values along an axis. See this JSFiddle example of how both of these options can be used.
Of course there are lots of ways to improve and build upon this out of the box functionality, but that is up to your specific demands and desires.
I have a code that generates charts dynamically based on the users inputs. I do not specifically format the tooltip, I just allow the defaults to take control. For some reason, there is consistently an a with a hat over it in the tooltip. For example, when hovering over a column chart entry, the tooltip shows:
Category
a(hat)- Series name:Value
Any idea where this ahat is coming into play?
I am using Highstock 1.2.5.
These are the options I have with my chart.
I am adding colors to yAxis using axis.addPlotBand based on certain conditions.
Also, I am using axis.addPlotLine to draw line some plot values.
Both, these options are set after chart is drawn. As, I have dynamic values.
This works fine no problem. Lately, I have enabled Export options.
Now, The exported pdf is not showing above mentioned changes. How do I do that ?
Second, I have enabled Legend. Is it possible to not to include Legend while exporting chart.