How to hide kendo jquery chart value axis unit labels

Question

I am trying to draw a line chart where a value axis and category axis will intersect at some point using kendo jquery chart.

I followed up this question on kendo forum https://www.telerik.com/forums/dynamic-vertical-line-in-charts

I choose to create multiple value axes. So far i am able to draw the graph as shown below but not able to remove the unit labels from the value axis on the left.

Can anyone help on how to remove the unit labels from the blue value axis or any better approach is available?

Here is sample code:

function drawChart(data) {
   var series = [
      {
         name: "Series1",
         color: "#96DF73",
         markers: {
            visible: false
         },
         data: data.Series1
      },
      {
         color: "#00B0F2",
         width: 4,
         markers: {
            visible: false
         },
         data: Array.from({ length: 8 }).fill(3.2)
      }
   ];

   $("#divChart").kendoChart({
      legend: {
         position: "top"
      },
      seriesDefaults: {
         type: "line",
         style: "smooth",
         tooltip: {
            visible: true
         },
         axis: "defaultCatAxis"
      },
      chartArea: {
         background: "#f1f1f1"
      },
      plotArea: {
         background: "white"
      },
      series: multiSpeedSeries,
      categoryAxis: {
         title: {
            text: "Category"
         },
         categories: [0, 1000, 2000, 4000, 6000, 8000, 10000, 12000],
         axisCrossingValues: [0, 5],
         justified: true,
         minorGridLines: {
            visible: true
         }
      },
      valueAxes: [
         {
            name: "defaultCatAxis",
            title: {
               text: "defaultCatAxis"
            },
            minorGridLines: {
               visible: true
            },
            min: 1
         },
         {
            labels: {
               //width: 3,
               visibility: false
            },

            line: {
               color: "#00B0F2",
               width: 4
            }
         }
      ]
   });
}

if I have read the question correctly I think this dojo may help: dojo.telerik.com/otuBehiq if it is I will add it as an answer for you. — David Shorthose
@DavidShorthose I wanted to remove the unit label/text from the blue value/vertical axis — Satyajit
yes,this will work. Hide the minor units as well, missed to add it in question — Satyajit
i have tweaked the last dojo so it hides the minor lines for you dojo.telerik.com/otuBehiq/2 — David Shorthose

David Shorthose David Shorthose · Accepted Answer · 2019-02-18T12:52:36

Your code was pretty much there with the way you were doing the labelling it was simply some typos with property definitions:

See dojo for the example: dojo.telerik.com/otuBehiq/2

All I did was correct your axis definition from:

 {
            labels: {
               //width: 3,
               visibility: false
            },

            line: {
               color: "#00B0F2",
               width: 4
            }
         }

to :

 {
                    labels: {
                        //width: 3,
                        visible:false
                    },

                    line: {
                        color: '#00B0F2',
                        width: 4,
                    }
                }

notice it is visible rather than visibility

as for the second part of your question in the comments you will need to expand on what you actually need/expect from the chart as it isn't clear as I have removed the minor values and grid lines from the chart.

How to hide kendo jquery chart value axis unit labels

1 Answers