highchartsangular2-highcharts

How to draw a column/bar graph or something like timeline from the following data

I have the following dataExample Data

From the above data the need is to draw a timeline of the vechicle with different color for differnet number of times the rollers passed i.e. Final outcome

I am unable to map the data points on chart or some vertical time line

Have tried using following highcharts:

  1. column chart
  2. heat maps
  3. treemap

But unable to generate results as expected

Solution

  • You can make it a column-stacked chart with just one column:

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Distances',
        align: 'left',
       
    },
    xAxis: {
        categories: [''],
        
    },
    yAxis: {
        min: 0,
        title: {
            text: 'distance in m'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                
                textOutline: 'none'
            }
        }
    },
    legend: {
        layour: 'horizontal',
        anchor: 'right',
        //x: 0,
        verticalAlign: 'bottom',
        
        borderWidth: 1,
        shadow: false
     },
    tooltip: {

        pointFormatter(original){ 
       return `<span style="color:${this.color}">●</span> from: ${this.stackY-this.y} to: ${this.stackY}`;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                //enabled: true
            }
        }
    },
    series: [
    {
        name: '2',
        data: [62],
        color: 'orange',
        showInLegend: false
    },
    {
        name: '1',
        data: [48],
        color: 'red',
        showInLegend: false
    },{
        name: '2',
        data: [26],
        color: 'orange',
        showInLegend: false
    },{
        name: '4',
        data: [49],
        color: 'green'
    },{
        name: '3',
        data: [2],
        color: 'darkgreen'
    },{
        name: '2',
        data: [7],
        color: 'orange',
        showInLegend: false
    },{
        name: '3',
        data: [2],
        color: 'red',
        showInLegend: false
    },{
        name: '2',
        data: [45],
        color: 'orange'
    },{
        name: '1',
        data: [10],
        color: 'red'
    },]
});
    <div id="container" style="width:250px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

    Of course, the data in the series can be generated by a function taking the data from an original format and automatting some structures, like adding showInLegend: false for the categories that were already represented in the legend.