Pie and Bar Chart

SpaceMax used highcharts JavaScript library for the 3D pie chart. And other two are custom but very easy to use.

Pie Chart

Markup example:


                                    <div class="pie-chart--flat" id="pie-chart--v1"></div>

JS initialization and updating the data:

You will find the code in js/app.js file.


                                        if ($("#pie-chart--v1").length > 0) {
                                            $("#pie-chart--v1").drawDoughnutChart([{
                                                    title: "Token sale participants",
                                                    value: 40,
                                                    color: "#3260ED"
                                                },
                                                {
                                                    title: "Founders and project team",
                                                    value: 30,
                                                    color: "#8CA8FF"
                                                },
                                                {
                                                    title: "Project partners",
                                                    value: 15,
                                                    color: "#B6BD00"
                                                },
                                                {
                                                    title: "Operational fund within the project",
                                                    value: 6,
                                                    color: "#D65800"
                                                },
                                                {
                                                    title: "Project consultation",
                                                    value: 5,
                                                    color: "#FFB755"
                                                },
                                                {
                                                    title: "Bounty company",
                                                    value: 4,
                                                    color: "#F23C42"
                                                },
                                            ]);
                                        }

Bar Chart

Core phase of tokens sale 40%

Partners and advisors 25%

Project partners 20%

Operational fund within the project 10%

Project consultation 5%

Markup example:


                                        <div class="bar-chart--v1 position-relative d-flex ">
                                        <div class="bar-portion jsElement" data-bg-color="#8ca8ff" data-width="40%">
                                            <span data-tooltip="">Core phase of tokens sale 40%</span>
                                        </div>
        
                                        <div class="bar-portion jsElement" data-bg-color="#3260ed" data-width="25%">
                                            <span data-tooltip="">Partners and advisors 25%</span>
                                        </div>
        
                                        <div class="bar-portion jsElement" data-bg-color="#b6bd00" data-width="20%">
                                            <span data-tooltip="">Project partners 20%</span>
                                        </div>
        
                                        <div class="bar-portion jsElement" data-bg-color="#d65800" data-width="10%">
                                            <span data-tooltip="">Operational fund within the project 10%</span>
                                        </div>
        
                                        <div class="bar-portion jsElement" data-bg-color="#ffb755" data-width="5%">
                                            <span data-tooltip="">Project consultation 5%</span>
                                        </div>
                                    </div>