Line Charts

Simple Line Chart

class MyChart(BaseChart):
    
    type = ChartType.Line
    
    class labels:
        Years = [2017, 2018, 2019, 2020, 2021, 2022]
    
    class data:

        class Whales: 
            data = [80, 60, 100, 80, 90, 60]
            backgroundColor = Color.Gray
            
        class Bears: 
            data = [60, 50, 80, 120, 140, 180]
            backgroundColor = Color.Blue
        
        class Dolphins: 
            data = [150, 80, 60, 30, 50, 30]
            backgroundColor = Color.Orange

    
    class options: 
        
        title = {"text": "Wildlife Populations", 
                 "display": True}

Detailed Line Chart

import textwrap     #to strip excess whitespace from the gradient strings

class MyChart(BaseChart):

    type = ChartType.Line

    class labels:
        Years = list(range(2017, 2023))

    class data:
        class Whales:
            data = [80, 60, 100, 80, 90, 60]
            borderColor = textwrap.shorten(PurpleGradient, 500)
            fill = False
            pointBorderWidth = 10
            pointRadius = 3

        class Bears:
            data = [60, 50, 80, 120, 140, 180]
            borderColor = textwrap.shorten(BlueGradient, 500)
            fill = False
            pointBorderWidth = 10
            pointRadius = 3

        class Dolphins:
            data = [150, 80, 60, 30, 50, 30]
            borderColor = textwrap.shorten(GreenGradient, 500)
            fill = False
            pointBorderWidth = 10
            pointRadius = 3

    class options:

        title = {
            "text": "Wildlife Populations", 
            "display": True, 
            "fontSize": 18
            }

        legend = {
            'position': 'bottom', 
            'labels': {
                'fontColor': Color.Gray, 
                'fullWidth': True
                }
            }

        scales = {
            "yAxes": [{
                'ticks': {
                    'beginAtZero': True, 
                    'padding': 15,
                    'max': 200
                    }
                }]
            }

The three gradients are defined separately as docstrings encapsulated within << >> tags to ensure they get converted properly to executable javascript.

Warning!

• Be careful with your choice of quotes in these docstrings; if they get parsed through in an escaped format (e.g. \") they won't work. Stick to single quotes where possible.
• These are illegal in a JSON document, and may not work in API requests; see here for workarounds

PurpleGradient = """
    <<(function() {
        var gradient = ctx.createLinearGradient(0, 0, 500, 0);
        gradient.addColorStop(0, 'orange');
        gradient.addColorStop(1, 'purple');
        return gradient 
        }
    )()>>
"""

BlueGradient = """
    <<(function() {
        var gradient = ctx.createLinearGradient(0, 0, 500, 0);
        gradient.addColorStop(0, '#1ff4b5');
        gradient.addColorStop(0.6, '#1b1a50');
        return gradient 
        }
    )()>>
"""

GreenGradient = """
    <<(function() {
        var gradient = ctx.createLinearGradient(0, 0, 500, 0);
        gradient.addColorStop(0, '#b6f41f');
        gradient.addColorStop(1, '#1a504a');
        return gradient 
        }
    )()>>
"""