MDjango
Posts: 9
Joined: Sat Apr 10, 2021 5:24 pm

How to minimize distance between title and chart

Hi

I am very happy that I make progress with your solid gauge. I really like it. But I have a very large distance between the title and the chart itself. I tried to use settings like margin, but I cannot get it so close as you do it here: https://www.highcharts.com/demo/gauge-solid

How could I get such a display?

Thanks!
MDjango
Posts: 9
Joined: Sat Apr 10, 2021 5:24 pm

Re: How to minimize distance between title and chart

I can see now that I could get title closer to the chart with the attribute 'y', but how can I get rid of the unused space above the title?
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to minimize distance between title and chart

Hello! Thanks for contacting us with your question! Could you share the demo of your chart? It will allow me to know your configuration. Kind regards,
Paweł Lysy
Highcharts Developer
MDjango
Posts: 9
Joined: Sat Apr 10, 2021 5:24 pm

Re: How to minimize distance between title and chart

Hi!

Thanks for your reply. Right now my code just looks like this:

Code: Select all

chart = {
        'chart': {
            'displayErrors': True,
            'type':'solidgauge',
            'renderTo':'hccontainer_medabr',
        },
        'title': {'align':'center', 'floating':True,'text':'My gauge', 'y':75, 'spacingTop':10,},
        'pane': {
            'center': ['50%', '85%'], 'size': '100%', 'startAngle': -90, 'endAngle':90, 'background': {
                'backgroundcolor': 'Highcharts.defaultOptions.legend.backgroundColor || \'#EE\'', 'innerRadius': '60%', 'outerRadius': '100%', 'shape': 'arc',
            },
        },
        'exporting': {'enabled': False},
        'tooltip': {'enabled': True},
        'yAxis':{'stops': [
                [0.2, '#55BF3B'], # green
                [0.5, '#DDDF0D'], # yellow
                [0.8, '#DF5353'], # red
            ], 'min':0, 'max':1500, 'lineWidth': 0, 'tickWidth': 0, 'minorTickInterval': 'null', 'tickAmount': 2, 'title': {
                'y':70,
                'text': 'Axis title'
            }, 'labels': {
                'y':16
            }
        },
        'credits': {
            'enabled': False
        },
        'plotOptions': {
            'solidgauge': {
                'dataLabels': {
                    'useHTML': True,
                    'borderWidth': 0,
                    'y':6,
                }
            }
        },
        'series': [{
            'name': 'tbd', 'data': [1201], 'dataLabels': {
                'format': '<div style="text-align:center"><span style="font-size:25px">{y}</span><br/><span style="font-size:12px;opacity:0.4">€</span></div>'
            }, 'tooltip': {
                'valueSuffix': ' €'
            }
        }]
    }
My template looks like this:

Code: Select all

<div class="col-sm-4 col-sm-offset-0 col-md-4 col-md-offset-0">
                    <h4>My temporary div title</h4>
                    <div id="hccontainer_medabr"></div>
                </div>

Is there anything else I could provide?
MDjango
Posts: 9
Joined: Sat Apr 10, 2021 5:24 pm

Re: How to minimize distance between title and chart

Can I somehow upload an image here for illustration?
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to minimize distance between title and chart

Hi again! For future, the best way of showing your code, is to create the demo in jsfiddle :)

I used your configuration, and since you used the floating: true setting, there is no space reserved for the title. Check to following demo: https://jsfiddle.net/BlackLabel/caL47yp8/

Does this works for you? Let me know if this works for you.
Kind regards,
Paweł Lysy
Highcharts Developer
MDjango
Posts: 9
Joined: Sat Apr 10, 2021 5:24 pm

Re: How to minimize distance between title and chart

Hi and thanks again. This helps!

About jsfiddle. I will keep that in mind, but it is new to me and I have to see how to copy and transform everything as I am using Django. I guess I just should use the rendered output instead of the original code in python.

Best regards
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: How to minimize distance between title and chart

No Problem! Just saying, that it can shorten the time of support, because the support team might ask for demo anyway, so if you provide it right away, getting the answer will be faster :)

In case of any further questions feel free to contact us again! Kind regards,
Paweł Lysy
Highcharts Developer

Return to “Highcharts Usage”