Hey everyone!
With the holiday season upon us, we want to share our upcoming working hours:
- New Year: Our team will be off on January 1st and 2nd. We’ll be back on Friday, January 3rd, to respond to any messages received during this time.
- Weekend: As usual, we don’t work on weekends, so January 4th and 5th will also be non-working days.
- Orthodox Christmas: Our office will be closed on Monday and Tuesday, January 6th and 7th for the holiday.
After that, we’ll return to our regular schedule and assist you as quickly as possible.
In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find tons of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel), which might just have the answers you need while we’re away.
Thanks a bunch for your understanding and support!
Warm regards and happy holidays!
TMS
Hi there!,
Is there any way except individual callbacks to change the title and subtitle styling e.g. size, colour etc. on highcharts?
Thanks!
Mee
Hi Mee,
if you mean to try and apply one/same callback for multiple HighCharts,
we have a workaround for that.
Depending on the chart engine, the hooks are slightly different, ( basically just tne chart engine name is different for each hook),
they are :
I will give you an example for the highCharts engine, and later you can use the same method for other engines/options, you just have to modify the chart engine name throughout the hook.
In the functions.php file of your theme, or child theme; insert this :
- This way, it will be applied to all the HighCharts.
- This hook takes three parameters:
1. $highcharts_render_data : which is an array with all the options,
2. $chartID : in case you need it for only some specific charts;
3. and the last one is the $chart_object.
-
In that example, we have changed the position of the Zoom reset button of highCharts from right side to the left, but you can modify it to change the options you need for your charts.
-
This will not be affected by the plugin updates, because these hooks will be saved in your Theme's functions.php.
As we noted on the wpDataCharts callbacks Documentation,
using wpDataChart callbacks requires certain level of programming skills and included support refers only to advice.
-
I hope that helps.
Let me know if i misunderstood the goal.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Miloš ,
Thanks for that. It works fine for some thinngs but I cannot get the styling to work completely for the title and subtitle.
Is there any way of using css to do this? You sent me some code before to hide some export options which worked really well.
This is what you sent me that I modified slightly
div.highcharts-contextmenu > ul > li:nth-child(1),
div.highcharts-contextmenu > ul > li:nth-child(2),
div.highcharts-contextmenu > ul > li:nth-child(6),
div.highcharts-contextmenu > ul > li:nth-child(9),
div.highcharts-contextmenu > ul > li:nth-child(10),
div.highcharts-contextmenu > ul > li:nth-child(11) {
display: none !important;
}
Would it be possible to use the same logic for styling the title and subtitle? E.g. (it doesn't work but I think you get where I am going with this.
div.highcharts > h1,
div.highcharts > h2,
div.highcharts > h3,
div.highcharts > h4,
div.highcharts > h5,
div.highcharts > h6 {
color:#2aa399 !important;
}
Best,
Mee
Maybe just to be clear, the reaso why I want to be able to style the title/text in the chart is so that it looks good on the website but also when I export it, the text becomes mega big (i have attached a download)
Attached files: test-chart (2).jpeg
Hi Mee,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
I can see what you mean,
if i try to make a dummy HighChart Line Chart and export as PNG image or PDF,
on that export, the Title and subtitle do get much larger than how it looks originally on the WP Page.
Screenshot of the Page :
Compared to PDF export and BNP image :
Here are CSS selectors you can try on your WP Page to manipulate subtitle text :
text.highcharts-subtitle {
font-size: 10px !important;
}
And for the "Title" text,
text.highcharts-title {
font-size: 10px !important;
}
I tried applying this on my Test site,
and on the WP Page it does seem the font is much smaller,
but if i try to export this via the HighChart Export,
the export result is even worse, sadly.
Now the subtitle text looks large again but it also 'cuts off' as parts of it are going 'off the screen'.
So, unfortunately, for the Export to PDF or image,
at the moment we don't have a valid solution.
This is an issue coming from the HighCharts Engine itself,
so i am not sure how much our developers can improve it,
but you can make an improvement suggestion for them,
and they will do their best to make a solution for manipulating the Title and Subtitle text size for the HighCharts Export in the future.
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
You can try to search online, if you can find a custom workaround,
on places such as Stack Overflow and similar,
if any user managed to add a custom chart hook or anything like that to manipulate this through the HighChart Engine,
and try to add a similar hook /script to your WP Page,
but so far we don't know if something like that is possible.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Miloš,
Thanks for looking into this.
I see what you mean with the text not wrapping properly. I had a look around online and I found this on highcharts and it seems like all the font sizes are related to exporting scale
https://www.highcharts.com/docs/export-module/export-module-overview
https://api.highcharts.com/highcharts/exporting.scale
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/exporting/scale/
The default in the engine is 400x600 but when I export my chart I get an image that is 1200 x 700 which in theory should destort the fonts ever so slightly. Is there any way of specify the export size? That might solve the font size issue when I export my charts.
For changing the color on the title I tried but it doesn't seem to work with that tag but it is smaller problem than the massive font size.
Best,
Mee
Hi Mee,
my sincerest apologies for all the waiting time.
I did my best, but unfortunately at this time we do not have a working solution to somehow manipulate how the export of the HighChart will turn out,
either by changing the font size of the chart on the WP page or any other method we tried.
That is an issue coming from the HighChart Export functionality istelf.
We will do our best to find a solution in the near future, but i can't promise an exact ETA on it.
You can affect the development speed, if you create a user suggestion from your end.
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
And for the meantime, you can only try a custom solution, if you can try to find any idea online on places such as Stack Overflow or similar places where users try custom workarounds.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables