hidfap
Posts: 3
Joined: Fri Nov 12, 2021 3:26 pm

Stock chart widget

Wed Nov 17, 2021 4:29 pm

Hello,
I wanted to know if highcharts stock was adapted to reproduce small stock graphics (widget format) if you have examples or ideas to reproduce this kind of design:
Image

Thanks :D

mateusz.b
Posts: 1033
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

Wed Nov 17, 2021 4:47 pm

Hello hidfap,

Welcome to our forum and thanks for contacting us with your question!

Highcharts are highly customizable and making chart like this should be quite easy, all you have to do is disable redundant elements.
Demo: https://jsfiddle.net/BlackLabel/mp41n3ou/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

hidfap
Posts: 3
Joined: Fri Nov 12, 2021 3:26 pm

Re: Stock chart widget

Wed Nov 17, 2021 8:22 pm

Wow this is perfect man thanks a lot! :D

mateusz.b
Posts: 1033
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

Wed Nov 17, 2021 11:50 pm

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

hidfap
Posts: 3
Joined: Fri Nov 12, 2021 3:26 pm

Re: Stock chart widget

Thu Nov 25, 2021 10:34 am

hey, one last question.
when I resize the chart or the container the chart is like inside padding
chart: {
width: 130,
height: 50,
},
can we make that the chart cover all the main container ?

mateusz.b
Posts: 1033
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

Fri Nov 26, 2021 2:22 pm

Hi hidfap,

By default chart has something like initial padding and this option is called spacing. To remove it simply set it values to 0.
Demo:https://jsfiddle.net/BlackLabel/z4q29f8t/
API reference: https://api.highcharts.com/highstock/chart.spacing

It removed most of the empty space on the edges, but as you can see there is still plenty below the chart line. To remove it completely you need to set Y axis min and max options.
Demo: https://jsfiddle.net/BlackLabel/3hx1bym6/
API reference: https://api.highcharts.com/highstock/yAxis.max,
https://api.highcharts.com/highstock/yAxis.min

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”