ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Custom marker on Line chart with CSV data

Hello,
I need to highlight some dates on a chart and I found viewtopic.php?t=40772&__cf_chl_jschl_tk ... WjcnBszQgR topic but I'm using CSV file as a data source and I don't know how to do it. Could you help me please?

I'm getting data this way:

Code: Select all

Highcharts.chart({
                  data: {
                      csvURL: "{% static 'csv/pricing.csv' %}",
                      enablePolling: false
                  },
                  ...
series: [
                      {
                          name: 'Price',
                          type: 'line',
                          turboThreshold: 0,
                          color: '#072fcc',
                          dataLabels: {},
                          marker: {
                              enabled: false
                          },
                          ...
                      }
                  ],
xAxis: {
                      type: 'datetime',
                      dateTimeLabelFormats: {
                          day: '%e %b',
                          week: '%e %b',
                          month: '%b %y',
                          year: '%Y'
                      },
                  },
CSV file format:

Code: Select all

2018-07-02,100.3000
2018-07-03,100.3000
2018-07-04,90.0000
2018-07-05,90.0000
2018-07-06,90.0000
I need to add red marker on the timeline if Important News was published on that date.
Image
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Custom marker on Line chart with CSV data

Hello,

Thanks for contacting us with your question!

You can use data.complete callback function to modify parsed CSV data if for example some of the y-axis values contain '*' symbol.

Demo: https://jsfiddle.net/BlackLabel/v1hbag2e/
API: https://api.highcharts.com/highcharts/data.complete

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Custom marker on Line chart with CSV data

Hello Michał,

That works like a charm!

Thank you, sir.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Custom marker on Line chart with CSV data

You're welcome!

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Custom marker on Line chart with CSV data

One more thing - is it possible to make such marker as a clickable link?

Or maybe it's possible to add a link into a tooltip for such marker.
I tried tooltip.formatter but <a> tag wasn't rendered.
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Custom marker on Line chart with CSV data

I still don't know if it possible, could you let me know, please?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Custom marker on Line chart with CSV data

Hi,

Sorry for late reply.

Yes, it is possible. You can use Highcharts.PointClickCallbackFunction to achieve this.

Demo: https://jsfiddle.net/BlackLabel/apu72zew/
API: https://api.highcharts.com/highcharts/p ... ents.click

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”