djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Background y axis line

Hi

I am trying to add the y-axis lines as shown in the exampleshttps://www.highcharts.com/demo/stock/basic-line

This is my code, what i am not enabling?

Code: Select all

     let  particulte_chart= this.sensor_chart.stockChart('particulate_plot', {
        chart: {
          type: 'line',
          animation: true,
          backgroundColor: "transparent",
          Color:"black"
        },
        credits: {
          enabled: false
        },
        legend: {
          enabled: true,
          layout: 'horizontal',
          verticalAlign: 'bottom',
          floating: false,
        },
        rangeSelector: {
          selected: 1,
          inputEnabled: false,
          enabled: false
        },
        title: {
          text: "Air Quailty",
          style: { "color": "#f4f5f8", "fontSize": "12px" }
        },
        yAxis: {
          min: 0,
          opposite: false,
          title: {
            text: "Mass	\xb5g/m\xb3",
            style: { "color": "#010101", "fontSize": "12px" }
          },
          labels: {
            formatter: function () {
              return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
            },
            style: { "color": "#010101", "fontSize": "12px" }
          },

          plotLines: [{
            label:
            {

              text: "EU Limit 40 \xb5g/m\xb3",
              style: { "color": "#010101", "fontSize": "12px" },
              align: 'center',
              y: -10,

            },
            color: 'red', // Color value
            value: 3, // Value of where the line will appear
            width: 5 // Width of the line   

          }],

        },

        navigator: {
          enabled: false
        },

        scrollbar: { enabled: false },

        series: [{
          data: [15, 25, 40, 40, 20,30, 5, 10, 40, 30],
          //pointStart: 1
      }],

        "tooltip": {
          "pointFormat": "<b>{point.y:.2f}</b>",
          "shared": true
        },
      });
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Background y axis line

Hello djoshi,

Thanks for contacting us with your question.

I have reproduced your chart (https://jsfiddle.net/BlackLabel/47y60tch/), but I'm still not quite sure what do you want to change. Did you mean yAxis grid lines?
Demo: https://jsfiddle.net/BlackLabel/rsL28dt4/
API reference: https://api.highcharts.com/highstock/yA ... dLineWidth

If that is not the case then please provide me with additional details or some ilustrations preferably.

Regards!
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Background y axis line

Thank You

Yes it was the grid lines i was trying to replicate.

Is it also possible that the trend line can be different colours at different levels? This is what I am trying to achieve.
a.jpg
a.jpg (74.01 KiB) Viewed 1018 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Background y axis line

Hi djoshi,

Sure, something like that is possible. You can achieve it with zones property.
Demo:https://jsfiddle.net/BlackLabel/3xy1jv2u/
API reference: https://api.highcharts.com/highcharts/series.line.zones

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Background y axis line

Thanks

That will work for us.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Background y axis line

That's great to hear! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Background y axis line

Thanks,

Sorry I have 2 last requests.

How do I remove the y axis labels and "Series 1" label
aseries.jpg
aseries.jpg (6.59 KiB) Viewed 991 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Background y axis line

Hello djoshi,

Here's a demo showing how to remove yAxis labels and disable legend.
Demo:https://jsfiddle.net/BlackLabel/0w3sh6g9/
API reference: https://api.highcharts.com/highcharts/y ... ls.enabled,
https://api.highcharts.com/highcharts/legend.enabled

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”