`plotLines` example with `datetime` objects

[c-jamie]

Hi there,

Is it possible to provide an example of using this framework with plotLines for the case where x is a time series of datetime

from highcharts_core.chart import Chart
from highcharts_core.options.series.area import LineSeries
from highcharts_core.global_options.shared_options import SharedOptions
import pandas as pd
import datetime as dt

df = pd.DataFrame({'date':[dt.datetime(2023,1,1), dt.datetime(2023,1,2)], 'sales': [10,20]})

my_chart = Chart.from_pandas(df,
                            property_map = {
                                'x': 'date',
                                'y': 'sales',
                            },
                            series_type = 'line')
my_chart.options.title = {
        'text': 'Ticker'
    }
my_chart.options.subtitle = {
        'text': 'Ticker'
    }
my_chart.options.plot_options: {
        'series': {
            'marker': {
                'enabled': False,
                'radius': 5.5
            }
        }
    }
my_chart.options.x_axis = {
        'type': 'datetime',
        'dateTimeLabelFormats': {
            'month': '%e. %b',
            'year': '%b'
        },
        'title': {
            'text': 'Date'
        },
         'plotLines': [{
            'color': '#FF0000',
            'width': 2,
            #'value': dt.datetime(2023,1,1)  this fails with: CannotCoerceError: value (2023-01-01 00:00:00) is not a numeric type, was <class 'datetime.datetime'>
        }]
    }

my_chart.options.y_axis = {
        'title': {
            'text': 'Growth'
        },
    },

my_chart.display()

With the above, if I uncomment 'value': dt.datetime(2023,1,1)

I get CannotCoerceError: value (2023-01-01 00:00:00)

Your Environment:

• OS: Windows, Jupyter Lab (notebook).
• Python Version: 3.11
• Highcharts Version: Installed Highcharts Python using pip install highcharts-core command.

highcharts-core 1.1.1 pypi_0 pypi

[hcpchris]

Thanks @c-jamie

Looking at your code, the issue here is that the PlotLine.value property expects a purely numeric value. The x-axis units, even when the type is set to "datetime", are actually numbers because internally Highcharts (JS) represents a datetime axis as a series of POSIX timestamps (number of milliseconds from the Unix epoch).

As of right now, the value property does not auto-convert a Python datetime object into a POSIX timestamp, but that's easy enough to do in your code. Simply change where your code says:

<snip>
         'plotLines': [{
            'color': '#FF0000',
            'width': 2,
            'value': dt.datetime(2023,1,1)
        }]
<snip>

to instead say:

<snip>
         'plotLines': [{
            'color': '#FF0000',
            'width': 2,
            'value': dt.datetime(2023,1,1).timestamp() * 1000
        }]
</snip>

and it should render as expected.

Also, as a side comment, I've created a new issue ( #58 ) to add auto-conversion from datetime to a POSIX timestamp within the PlotLine.value property. That'll be included in the next patch release ( v.1.2.1 ), however but in the meantime the approach described above should work fine.

Hope this helps, and if you run into other issues please let us know!

ETA: Fixed the .timestamp() method to show conversion to milliseconds rather than seconds.