Hey everyone!

With the holiday season upon us, we want to share our upcoming working hours:

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

Okay
  Public Ticket #3438425
Styling of title & subtitle of highcharts
Closed

Comments

  •  1
    Mee started the conversation

    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

  •  1,847
    Miloš replied

    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 :

    wpdatatables_filter_highcharts_render_data
    wpdatatables_filter_chartjs_render_data
    wpdatatables_filter_google_charts_render_data
    wpdatatables_filter_apexcharts_render_data

    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 :

    add_filter( 'wpdatatables_filter_highcharts_render_data', 'updateHighchartsRenderData', 10, 3 );
    function updateHighchartsRenderData ($highcharts_render_data, $chartID, $chart_object){
        $highcharts_render_data['options']['chart']['resetZoomButton']['position']['align'] = 'left';
        return $highcharts_render_data;
    }

    - 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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1
    Mee replied

    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



  •  1
    Mee replied

    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

  •  1,847
    Miloš replied


    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 :

    9815545726.png

    Compared to PDF export and BNP image :

    2263498842.png
    1547317163.png

    Here are CSS selectors you can try on your WP Page to manipulate subtitle text :

    text.highcharts-subtitle {
        font-size: 10px !important;
    }

    9550168268.png

    And for the "Title" text,

    text.highcharts-title {
        font-size: 10px !important;
    }

    5104260972.png


    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'.

    4726971650.png
    9202458858.png

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1
    Mee replied

    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


  •  1,847
    Miloš replied

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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