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

Stock chart widget

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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

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

Wow this is perfect man thanks a lot! :D
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

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

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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock chart widget

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”