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.
Related
I am using the highchart library for displaying the charts.
It displays the chart as an SVG image. The legend part is also a part of the SVG.
In the screenshot, please check the <g class="highcharts-legend" element. It is a part of the SVG.
Is there any possibility that legends should not be a part of the SVG? It should be outside the SVG as an HTML list.
Maybe there is an option in the highchart configurations but I am missing it?
Update:
Using the useHtml option, the text of the legend is now outside the SVG, but the color dots are still inside the SVG.
There is useHTML option for legend, but it will place only text elements outside SVG.
legend: {
useHTML: true,
...
}
You need to create a custom legend if you want to move it fully outside of SVG.
Live demo: http://jsfiddle.net/BlackLabel/rox6dc7a/
API Reference: https://api.highcharts.com/highcharts/legend.useHTML
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.
Material.io has this great tool called the Material Palette Generator: https://material.io/design/color/#tools-for-picking-colors. Using it, you can pick a primary and secondary color, and then click a link "View in Color Tool" which takes you to a page where you can see your choices in different ways: https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=c63131.
But there doesn't seem to be an easy way of exporting your palette into a format usable for generating a custom Angular Material theme. They have an export link, but the closest format seems to be CodePen. But once you open it in CodePen, the CSS doesn't seem to have the palette information you need.
My question: has anyone tried these tools, and is there a pre-established pathway from Material palette to Angular Material custom theme? Or are they unrelated? If unrelated, is there a simple way to copy the color codes needed from the former to the latter?
Thanks.
You can use this website for generate a material color. For you only need a hex code, and after this you can generate the expected color format.
Expected color format:
Generated result:
How?
How to make the legend come in the image while exporting chart as png image?
Please refer JSFIDDLE.
Highcharts is designed for export only chart. If you want to export also elements outside the chart, you can use for example html2canvas. Take a look at the example posted below.
Example:
http://jsfiddle.net/h96daj1k/
I am working on a simple chart with Highcharts on ExtJS 3.* version. I am using this simple example on jsfiddle. I don't want to render this chart to a div element. I want to put this in a Ext.Panel but when I tried it gives error. How can I do without chart's renderToproperty.
As #Sebastian Bochan stated highcharts.com/download solved my problem.