Search code examples
jquerykendo-uikendo-chart

How to hide kendo jquery chart value axis unit labels


Kendo Chart

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
            }
         }
      ]
   });
}

Solution

  • 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.